下劃線:http://underscorejs.org/
參考文檔:http://www.css88.com/doc/underscore/
頁面代碼:
@{viewbag.title =“ index”;} <script src =“ scripts/bootstrap-typeahead.js”> </script> <script src =“ scripts/scripts/underscore-min.js”> </script> </script> <div>簡單使用
<div style =“ margin:10px 50px”> <標籤for =“ product_search”>產品搜索:</label> <input ID =“ product_search” type =“ text” date-provide =“ typeahead” data-source ='[data source ='[“ data1”,“ data1”,“ data2”,“ data3”,“ data 3”]
使用腳本填充數據
<div style =“邊距:10px 50px”> <標籤for =“ product_search”>產品搜索:</label> <input ID =“ product_search_js” type =“ text” text“ data-provide =“ typeahead”> </div> </div> </div> <script> <script type =“ = function(){var that = this; settimeout(function(){that.hide()},250);}; $('#product_search_js')。 typeahead({source:function:function(query,process){return {return [return [js數據1“,js數據1”,“ “ <==”;},updater:function(item){console.log(“'” + item +“'selected。”); // //瀏覽器控制台輸出$(“#product_search”)支持ajax獲取數據
<div style =“邊距:10px 50px”> <標籤=“ product_search”>產品搜索:</label> <input ID =“ product_search_ajax” type =“ text” text“ data-provide =” togahead =“ typeahead”> </div> </div> </div> <script type =“ parameter = {query:query}; $。post('@url.action(“ ajaxservice”)',parameter,function(data){process(data);});}}}); </script>>>使用對像數據
<div style =“邊距:10px 50px”> <標籤for =“ product_search”>產品搜索:</label> <input ID =“ product_search_object” type =“ text” text“ data-provide =“ typeahead”> </div> </div> </div> <script> <script type =“ 499.98},{id: 1,name: "object2",price: 134.99},{id: 2,name: "object3",price: 49.95}];$('#product_search_object').typeahead({source: function (query, process) {var results = _.map(products, function (product) {return product.name;}); process(result);},熒光筆:function(item){return“ ==>” + item +“ +” <= =“;},updater:function(item){console.log(“' + item +” + item +“'selected。控制器
public Action Result index(){return view();} public Action ressult ajaxService(){字符串query =“”; if(!string.isnullorwhitespace(request [query'query''])query = request = request =“ query” query'query''效果圖展示如下:
下面繼續給大家介紹bootstrap學習系列之bootstrap typeahead組件實現百度下拉效果(續)
以上所述是小編給大家介紹的bootstrap學習系列之使用bootstrap typeahead組件實現百度下拉效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!