使用typeahead.js可以实现预先输入，即智能提示，本篇在ASP.NET MVC下实现。实现效果如下：
20229283839895.png
首先是有关城市的模型。
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()
{
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
{
}
@section scripts
{
}
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对知鸟论坛的支持。如果你想了解更多相关内容请查看下面相关链接 |
发表于 2023-5-4 11:33:31