Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

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 组件实现百度下拉效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！