使用typeahead.js可以實(shí)現(xiàn)預(yù)先輸入，即智能提示，本篇在ASP.NET MVC下實(shí)現(xiàn)。實(shí)現(xiàn)效果如下：

首先是有關(guān)城市的模型。

    public class City    {public int Id { get; set; }public string Name { get; set; }public string PinYin { get; set; }    }

在HomeController中響應(yīng)前端請(qǐng)求返回有關(guān)City的json數(shù)據(jù)。

public ActionResult GetCitiesJson(){    var result = new List<City>()    {new City(){Id = 1, Name = "青島",PinYin = "qingdao"},new City(){Id = 10, Name = "青山",PinYin = "qingshan"},new City(){Id = 11, Name = "青峰",PinYin = "qingfeng"},new City(){Id = 2, Name = "武漢",PinYin = "wuhan"},new City(){Id = 3, Name = "煙臺(tái)",PinYin = "yantai"},new City(){Id = 4, Name = "哈爾濱",PinYin = "haerbing"},new City(){Id = 5, Name = "北京",PinYin = "beijing"},new City(){Id = 6, Name = "安陽",PinYin = "angyang"},new City(){Id = 7, Name = "長春",PinYin = "changchun"},new City(){Id = 8, Name = "東陽",PinYin = "dongyang"},new City(){Id = 9, Name = "葛洲壩",PinYin = "gezhoubei"}    };    return Json(result,JsonRequestBehavior.AllowGet);}

在視圖中先加載City集合，再使用預(yù)先輸入功能。

@section styles{    <link href="~/Content/TypeHead.css" rel="external nofollow"  rel="stylesheet" />}<div>    <input type="text" placeholder="輸入城市名稱"></div>@section scripts{    <script src="~/Scripts/typeahead.bundle.js"></script>    <script type="text/javascript">$(function () {    $.getJSON("@Url.Action("GetCitiesJson","Home")", function(data) {if (data) {    $.each(data, function(index, city) {cities.push(city.Name);       });}    });    //預(yù)先輸入功能    $(".typeahead").typeahead({hint: true,highlight: true,minLength: 1    },    {name: "city",displayKey: "value",source: substringMatcher(cities)    });});var cities = [];//參數(shù)arr表示數(shù)據(jù)源 數(shù)組var substringMatcher = function (arr) {    return function findMatches(q, cb) {var substrRegex;var matches = [];substrRegex = new RegExp(q, "i");$.each(arr, function (i, ele) {    if (substrRegex.test(ele)) {matches.push({ value: ele });    }   });cb(matches);    };};    </script>}

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接