自动填充输入框 Asp .Net Mvc

1 效果

当在一个文本框中输入时，可以自动查找相关选项，然后加载出来以供参考

 

2 前台代码

 

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.js"></script>

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>

 

<input type="text" id="city" name="city" />

<script type="text/javascript">

    $("input#city").autocomplete({

        source: "/mix/CityAutoComplete",

        minLength: 1,

        select: function (event, ui) {

            alert("Select " + ui.item.label);

        }

    });

</script>

 

3 后台代码

此处的参数一定要是term的字符串，该字符串为当前在文本框中输入的值。在这里，自动找出与当前输入城市相同省份的城市。

 

public ActionResult CityAutoComplete(string term)

        {

            var cities = new List<City> {

                new City{Id=1,Name="厦门",Province="福建省"},

                new City{Id=1,Name="福州",Province="福建省"},

                new City{Id=1,Name="泉州",Province="福建省"},

                new City{Id=1,Name="西安",Province="陕西省"},

                new City{Id=1,Name="长沙",Province="湖南省"},

                new City{Id=1,Name="贵州",Province="湖北省"},

                new City{Id=1,Name="包头",Province="甘肃省"},

                new City{Id=1,Name="杭州",Province="浙江省"}

            };

 

            var currentCity = cities.FirstOrDefault(x => x.Name == term);

 

            var projection = from city in cities

                             where city.Province == currentCity.Province

                             select new{

                                id = city.Id,

                                label = city.DisplayName,

                                value = city.DisplayName

                                };

 

            return Json(projection.ToList(), JsonRequestBehavior.AllowGet);

        }