@{ ViewBag.Title = "Index"; } <script src="https://www.jb51.net/Scripts/bootstrap-typeahead.js"></script> <script src="https://www.jb51.net/Scripts/underscore-min.js"></script> <div>
简单使用
<div> <label for="product_search"> Product Search: </label> <input type="text" data-provide="typeahead" data-source='["DATA1", "DATA2", "DATA3"]' /> </div>
使用脚本填充数据
<div> <label for="product_search"> Product Search: </label> <input 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> <label for="product_search"> Product Search: </label> <input 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> <label for="product_search"> Product Search: </label> <input 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 组件实现百度下拉效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: