Souligner 官网 ： http: //underscorejs.org/
参考文档 ： http: //www.css88.com/doc/underscore/
：
@ {Viewbag.Title = "index";} <script src = "scripts / bootstrap-typeahead.js"> </ script> <script src = "scripts / tindscore-min.js"> </ script> <div>简单使用
<div style = "margin: 10px 50px"> <label for = "product_search"> Recherche de produits: </béke> <entrée id = "product_search" type = "text" data-provide = "typeAhead" data-force = '["data1", "data2", "data3"]' /> </v>
使用脚本填充数据
<div style = "margin: 10px 50px"> <étiquette pour = "product_search"> Recherche de produits: </ label> <entrée id = "product_search_js" type = "text" data-provide = "typeahead"> </ div> <script type = "text / javascrip () {var that = this; setTimeout (function () {that.hide ()}, 250);}; $ ('# product_search_js'). typeAl ({source: function (query, process) {return ["js 数据 1", "js 数据 2", "js 数据 3"];}, highLighter: function ( "<==";}, updater: function (item) {console.log ("'" + item + "' sélectionné.");支持 Ajax 获取数据
<div style = "margin: 10px 50px"> <label for = "product_search"> Recherche de produit: </bable> <input id = "product_search_ajax" type = "text" data-provide = "typehead"> </ div> <script type = "text / javascript"> $ ('# product_search_ajax'). {query: query}; $. Post ('@ url.action ("ajaxService")', paramètre, fonction (data) {process (data);});}}); </ script>使用对象数据
<div style = "margin: 10px 50px"> <étiquette pour = "product_search"> Recherche de produits: </ labe> <entrée id = "product_search_object" type = "text" data-provide = "typehead"> </ div> <script type = "text / javascrip 1, nom: "Object2", prix: 134.99}, {id: 2, nom: "Object3", prix: 49.95}]; $ ('# Product_search_Object'). Typeahead ({Source: Fonction (Query, Process) {var Results = _.map (Products, Function (Product) {return product. "==>" + item + "<==";}, updater: function (item) {console.log ("'" + item + "' Selected."); return item;}});}); </cript> </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").：
下面继续给大家介绍 Bootstrap 学习系列之 Bootstrap Typeahead 组件实现百度下拉效果 (续)
以上所述是小编给大家介绍的 Bootstrap 学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！