Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
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); }
效果图展示如下:
狼蚁网站SEO优化继续给大家介绍
以上所述是长沙网络推广给大家介绍的Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!