ASP.NET?MVC使用typeahead.js實(shí)現(xiàn)輸入智能提示功能
使用typeahead.js可以實(shí)現(xiàn)預(yù)先輸入,即智能提示,本篇在ASP.NET MVC下實(shí)現(xiàn)。實(shí)現(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)前端請(qǐ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 = "煙臺(tái)",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 = "長(zhǎng)春",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> }
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
- Vue實(shí)現(xiàn)typeahead組件功能(非??孔V)
- BootStrap Typeahead自動(dòng)補(bǔ)全插件實(shí)例代碼
- Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果
- BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果(續(xù))
- Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能
- 使用bootstrap typeahead插件實(shí)現(xiàn)輸入框自動(dòng)補(bǔ)全之問題及解決辦法
- 使用Bootstrap typeahead插件實(shí)現(xiàn)搜索框自動(dòng)補(bǔ)全的方法
相關(guān)文章
asp.net(C#) 生成隨機(jī)驗(yàn)證碼的代碼
asp.net(C#) 生成隨機(jī)驗(yàn)證碼的代碼...2007-04-04Net Core Web Api項(xiàng)目與在NginX下發(fā)布的方法
這篇文章主要介紹了Net Core Web Api項(xiàng)目與在NginX下發(fā)布的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03asp.net微信開發(fā)(已關(guān)注用戶管理)
這篇文章主要介紹了asp.net微信開發(fā)中有關(guān)已關(guān)注用戶管理的相關(guān)內(nèi)容,需要的朋友可以參考下2015-11-11AspNetPager分頁控件源代碼(Version 4.2)
AspNetPager分頁控件源代碼(Version 4.2)...2007-04-04asp.net結(jié)合Ajax驗(yàn)證用戶名是否存在的代碼
關(guān)于Ajax的操作簡(jiǎn)單總結(jié),結(jié)合Ajax驗(yàn)證用戶名是否存在的代碼2010-06-06C#反射技術(shù)的簡(jiǎn)單操作(讀取和設(shè)置類的屬性)
反射的作用想必大家都知道了吧,少量屬性的自動(dòng)化操作手動(dòng)添加幾下當(dāng)然是沒有問題的,但是屬性數(shù)量較多的時(shí)候敲起這些繁鎖的代碼可以困了,再說對(duì)擴(kuò)展和維護(hù)性造成很多的不遍,以下代碼中如不能直接使用請(qǐng)?zhí)砑觰sing System.Text;的引用。2011-01-01