使用 Bootstrap Typeahead 组件实现百度下拉效果

http://www.cnblogs.com/xcsn/p/3456200.html 推荐链接：http://www.cnblogs.com/haogj/p/3376874.html   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); }  效果：      .