밑줄 ： http : //underscorejs.org/
： ： http : //www.css88.com/doc/underscore/
页面代码 ：
@{viewbag.title = "index";} <script src = "scripts/bootstrap-typeahead.js"> </script> <script src = "scripts/indentscore-min.js"> </script> <div>简单使用
<div style = "margin : 10px 50px"> <label for = "product_search"> product 검색 : </label> <input id = "product_search"type = "text"data-provide = "typeahead"data-source = '[ "data1", "data3"]'/> </div>
使用脚本填充数据
<div style = "margin : 10px 50px"> <label for = "product_search"> product 검색 : </label> <input id = "product_search_js"type = "text"data-provide = "typeahead"> </div> <script type = "text/javascript"> $ (document). (. "<==";}, updater : function (item) {console.log ( " ' + item +"'selected. "); val (항목); 반환 항목;}}) </script>支持 ajax ax
<div style = "margin : 10px 50px"> <label for = "product_search"> product 검색 : </label> <input id = "product_search_ajax"type = "text"data-provide = "typeahead"> </div> <script type = "text/javaScript"> $ ( '#product_search_ajax'). typeahead (function :). = {query : query}; $. post ( '@url.action ( "ajaxservice")', 매개 변수, 함수 (data) {process (data);});}}); </script>使用对象数据
<div style = "margin : 10px 50px"> <label for = "product_search"> product 검색 : </label> <input id = "product_search_object"type = "text"data-provide = "typeahead"> </div> <script type = "text/javascript"> $ (var uppu즈i = [ind : 0, 객체 1, 가격 : ", 가격 : 499.98}, {id : 1, name : "object2", 가격 : 134.99}, {id : 2, name : "object3", 가격 : 49.95}]; $ ( '##product_search_object'). typeahead ({source : function (query, process) {var results = _.map (제품) {return (제품) {return product.name;}); process (results);}, Highlighter : function (item) {return "==>" + item + "<==";}, Updater : function (item) {console.log ( " '' + item +" 'selected. "); 반환 항목;}}); </div>.控制器
public actionResult index () {return view ();} public actionResult ajaxService () {string query = ""; if (! string.isnullorwhitespace = query = request [ "query"]. toString (); var data = ( "ajax1, ajax2, ajax3"; split ( ',');效果图展示如下 ：
下面继续给大家介绍 부트 스트랩 ots 부트 스트랩 타입 헤드 组件实现百度下拉效果 (续)
以上所述是小编给大家介绍的 부트 스트랩 ots 부트 스트랩 타입 헤드 组件实现百度下拉效果, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！ 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！