ASP.NET MVC uses typeahead.js to realize input intelligent prompt function_practical skills

Using typeahead.js can realize input in advance, that is, intelligent prompt, this article is implemented under ASP.NET MVC. The effect is as follows:

The first is A model of the city.

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

Respond to the front-end request in HomeController to return the json data about City.

public ActionResult GetCitiesJson()
{
var result = new List()
{
new City(){Id = 1, Name = "Qingdao",PinYin = "qingdao"},
new City(){Id = 10, Name = "Qingshan",PinYin = "qingshan"},
new City(){Id = 11, Name = "Qingfeng",PinYin = "qingfeng"},
new City(){Id = 2, Name = "Wuhan",PinYin = "wuhan"},
new City(){Id = 3, Name = "Yantai",PinYin = "yantai"},
new City(){Id = 4, Name = "Harbin",PinYin = "haerbing"},
new City(){Id = 5, Name = "Beijing",PinYin = "beijing"},
new City(){Id = 6, Name = "Anyang",PinYin = "angyang"},
new City(){Id = 7, Name = "Changchun",PinYin = "changchun"},
new City(){Id = 8, Name = "Dongyang",PinYin = "dongyang"},
new City(){Id = 9, Name = "Gezhouba",PinYin = "gezhoubei"}
};
return Json(result,JsonRequestBehavior.AllowGet);
}

First load the City collection in the view , then use the typeahead feature.

@section styles
{

}