ASP.NET?MVC使用typeahead.js實現(xiàn)輸入智能提示功能

更新時間：2022年09月02日 08:38:33 作者：Darren?Ji

這篇文章介紹了ASP.NET?MVC使用typeahead.js實現(xiàn)輸入智能提示功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

使用typeahead.js可以實現(xiàn)預(yù)先輸入，即智能提示，本篇在ASP.NET MVC下實現(xiàn)。實現(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)前端請求返回有關(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 = "煙臺",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 style="margin: 50px;">
    <input class="typeahead" 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)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章: