在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示

使用typeahead.js可以实现预先输入，即智能提示，本篇在ASP.NET MVC下实现。实现效果如下：

首先是有关城市的模型。

 

    public class City

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string PinYin { get; set; }

    }

 

在HomeController中响应前端请求返回有关City的json数据。

 

        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集合，再使用预先输入功能。

 

@section styles

{

    <link href="~/Content/TypeHead.css" 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);                   

                    });

                }

            });

            //预先输入功能

            $('.typeahead').typeahead({

                hint: true,

                highlight: true,

                minLength: 1

            },

            {

                name: 'city',

                displayKey: 'value',

                source: substringMatcher(cities)

            });

        });

        var cities = [];

        //参数arr表示数据源 数组

        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>

}

如何同时支持拼音和汉字的预先输入、智能提示呢？My dear friends, Any idea?