UnderScore官網:http://underscorejs.org/
參考文檔:http://www.css88.com/doc/underscore/
頁面代碼:
@{ ViewBag.Title = "Index"; } <script src="Scripts/bootstrap-typeahead.js"></script> <script src="Scripts/underscore-min.js"></script> <div>
簡單使用
<div style="margin: 10px 50px"> <label for="product_search"> Product Search: </label> <input id="product_search" type="text" data-provide="typeahead" data-source='["DATA1", "DATA2", "DATA3"]' /> </div>
使用腳本填充數據
<div style="margin: 10px 50px"> <label for="product_search"> Product Search: </label> <input id="product_search_js" type="text" data-provide="typeahead"> </div> <script type="text/javascript"> $(document).ready(function ($) { $.fn.typeahead.Constructor.prototype.blur = function () { var that = this; setTimeout(function () { that.hide() }, 250); }; $('#product_search_js').typeahead({ source: function (query, process) { return ["JS數據1", "JS數據2", "JS數據3"]; }, highlighter: function (item) { return "==>" + item + "<=="; }, updater: function (item) { console.log("'" + item + "' selected."); //浏覽器控制台輸出 $("#product_search").val(item); return item; } }); }) </script>
支持 Ajax 獲取數據
<div style="margin: 10px 50px"> <label for="product_search"> Product Search: </label> <input id="product_search_ajax" type="text" data-provide="typeahead"> </div> <script type="text/javascript"> $('#product_search_ajax').typeahead({ source: function (query, process) { var parameter = { query: query }; $.post('@Url.Action("AjaxService")', parameter, function (data) { process(data); }); } }); </script>
使用對象數據
<div style="margin: 10px 50px"> <label for="product_search"> Product Search: </label> <input id="product_search_object" type="text" data-provide="typeahead"> </div> <script type="text/javascript"> $(function () { var products = [ { id: 0, name: "object1", price: 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(results); }, highlighter: function (item) { return "==>" + item + "<=="; }, updater: function (item) { console.log("'" + item + "' selected."); return item; } }); }); </script> </div>
控制器
public ActionResult Index() { return View(); } public ActionResult AjaxService() { string query = ""; if (!string.IsNullOrWhiteSpace(Request["Query"])) query = Request["Query"].ToString(); var data = ("AJAX1,AJAX2,AJAX3").Split(','); return Json(data); }
效果圖展示如下:
下面繼續給大家介紹BootStrap學習系列之Bootstrap Typeahead 組件實現百度下拉效果(續)
以上所述是小編給大家介紹的Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!