ขีดล่าง官网： http: //underscorejs.org/
参考文档： http: //www.css88.com/doc/underscore/
页面代码：
@{viewbag.title = "index";} <script src = "scripts/bootstrap-ypeahead.js"> </script> <script src = "scripts/underscore-min.js"> </script>简单使用
<div style = "margin: 10px 50px"> <label for = "product_search"> การค้นหาผลิตภัณฑ์: </label> <อินพุต id = "product_search" type = "text type" data-provide = "typeahead" data-source = '["data1", "data2", "data3"
使用脚本填充数据
<div style = "มาร์จิ้น: 10px 50px"> <label for = "product_search"> การค้นหาผลิตภัณฑ์: </label> <อินพุต id = "product_search_js" type = "text" data-provide = "typeahead"> </div> <script type = "text/javascript"> $ () {var that = this; settimeout (function () {that.hide ()}, 250);}; $ ('#product_search_js'). typeahead ({source: function (Query, process) {return ["JS 数据 1", "JS 数据 2", "JS 数据 3" "<==";}, updater: function (item) {console.log ("" " + รายการ +" 'เลือก ");支持 Ajax 获取数据
<div style = "มาร์จิ้น: 10px 50px"> <label for = "product_search"> การค้นหาผลิตภัณฑ์: </label> <อินพุต id = "product_search_ajax" type = "text" data-provide = "typeahead"> </div> {Query: Query}; $. Post ('@url.action ("AjaxService")', พารามิเตอร์, ฟังก์ชัน (ข้อมูล) {กระบวนการ (data);});}}); </script>使用对象数据
<div style = "มาร์จิ้น: 10px 50px"> <label for = "product_search"> การค้นหาผลิตภัณฑ์: </label> <อินพุต id = "product_search_object" type = "text" data-provide = "typeahead"> </div> <script type = "text/javascript" 1, ชื่อ: "Object2", ราคา: 134.99}, {id: 2, ชื่อ: "Object3", ราคา: 49.95}]; $ ('#product_search_object'). typeahead ({แหล่งที่มา: ฟังก์ชั่น (แบบสอบถาม, กระบวนการ) {return "==>" + item + "<==";}, updater: function (item) {console.log ("" " + item +" 'เลือก "); return item;}});}); </script> </div>控制器
Public ActionResult Index () {return view ();} แอ็คชั่นสาธารณะ AjaxService () {string query = "" ถ้า (! string.isnullorwhitespace (คำขอ ["query"]) query = คำขอ ["query"]效果图展示如下：
下面继续给大家介绍 bootstrap 学习系列之 bootstrap typeahead 组件实现百度下拉效果 (续)
以上所述是小编给大家介绍的 bootstrap 学习系列之使用 bootstrap typeahead 组件实现百度下拉效果， 希望对大家有所帮助， 如果大家有任何疑问请给我留言如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！ 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！ 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！