Subsensor ： ： http: //underscorejs.org/
参考文档 ： http: //www.css88.com/doc/underscore/
页面代码 ：
@{Verbag.title = "index";} <script src = "scripts/bootstrap-typeeahead.js"> </script> <script src = "scripts/subscore-min.js"> </script> <div>简单使用
<div style = "margin: 10px 50px"> <etiqueta for = "product_search"> búsqueda del producto: </label> <input id = "product_search" type = "text" data-provide = "typeahead" data-source = '["data1", "data2", "data3"]'/> </div>
使用脚本填充数据
<div style = "margin: 10px 50px"> <etiqueta for = "product_search"> búsqueda del producto: </selabel> <input id = "product_search_js" type = "text" data-proide = "typeahead"> </div> <script type = "text/javascript"> $ (documento). () {var that = this; setTimeOut (function () {that.hide ()}, 250);}; $ ('#product_search_js'). typeahead ({fuente: function (proceso, proceso) {return ["js 数据 1", "js 数据 2", "js 数据 3"];}, alto: function (ítem) {return " "<==";}, updater: function (item) {console.log ("'" + item + "' seleccionado.");支持 Ajax 获取数据
<div style = "margin: 10px 50px"> <etiqueta for = "product_search"> búsqueda del producto: </label> <input id = "product_search_ajax" type = "text" data-proide = "typeahead"> </div> <script type = "text/javascript"> $ ('#product_search_ajax'). {Query: Query}; $.使用对象数据
<div style = "margin: 10px 50px"> <etiqueta for = "product_search"> búsqueda del producto: </label> <input id = "product_search_object" type = "text" data-proide = "typeahead"> </div> <script type = "text/javascript"> $ (function () {var products = [{id: 0, nombre: "Object1", precio: 499.98}, 499. 1, nombre: "Object2", precio: 134.99}, {id: 2, nombre: "Object3", precio: 49.95}]; $ ('#product_search_object'). Typeahead ({fuente: function (Query, Process) {var Results = _.map (productos, function (producto) {return Product.name;}); Process (Process);},}, Tipo (Tipo) (Tipo) "==>" + item + "<==";}, updater: function (item) {console.log ("'" + item + "' seleccionado."); return item;}});}); </script> </div>控制器
public ActionResult index () {return View ();} public ActionResult AjaxService () {String Query = ""; if (! String.ISNullorwhiteSpace (request ["Query"])) Query = request ["consulta"]. ToString (); var data = ("AJAX1, AJAX2, AJAX3").效果图展示如下 ：
下面继续给大家介绍 Bootstrap 学习系列之 bootstrap typeahead 组件实现百度下拉效果 (续)
以上所述是小编给大家介绍的 Bootstrap 学习系列之使用 bootstrap typeahead 组件实现百度下拉效果 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！ 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！