下劃線：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組件實現百度下拉效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！