下划线:http://underscorejs.org/
参考文档:http://www.css88.com/doc/underscore/
页面代码:
@{viewbag.title =“ index”;} <script src =“ scripts/bootstrap-typeahead.js”> </script> <script src =“ scripts/scripts/underscore-min.js”> </script> </script> <div>简单使用
<div style =“ margin:10px 50px”> <标签for =“ product_search”>产品搜索:</label> <input ID =“ product_search” type =“ text” date-provide =“ typeahead” data-source ='[data source ='[“ data1”,“ data1”,“ data2”,“ data3”,“ data 3”]
使用脚本填充数据
<div style =“边距:10px 50px”> <标签for =“ product_search”>产品搜索:</label> <input ID =“ product_search_js” type =“ text” text“ data-provide =“ typeahead”> </div> </div> </div> <script> <script type =“ = function(){var that = this; settimeout(function(){that.hide()},250);}; $('#product_search_js')。typeahead({source:function:function(query,process){return {return [return [js数据1“,js数据1”,“ “ <==”;},updater:function(item){console.log(“'” + item +“'selected。”); // //浏览器控制台输出$(“#product_search”)支持ajax获取数据
<div style =“边距:10px 50px”> <标签=“ product_search”>产品搜索:</label> <input ID =“ product_search_ajax” type =“ text” text“ data-provide =” togahead =“ typeahead”> </div> </div> </div> <script type =“ parameter = {query:query}; $。post('@url.action(“ ajaxservice”)',parameter,function(data){process(data);});}}}); </script>>>使用对象数据
<div style =“边距:10px 50px”> <标签for =“ product_search”>产品搜索:</label> <input ID =“ product_search_object” type =“ text” text“ data-provide =“ typeahead”> </div> </div> </div> <script> <script type =“ 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(result);},荧光笔:function(item){return“ ==>” + item +“ +” <= =“;},updater:function(item){console.log(“' + item +” + item +“'selected。控制器
public Action Result index(){return view();} public Action ressult ajaxService(){字符串query =“”; if(!string.isnullorwhitespace(request [query'query''])query = request = request =“ query” query'query''效果图展示如下:
下面继续给大家介绍bootstrap学习系列之bootstrap typeahead组件实现百度下拉效果(续)
以上所述是小编给大家介绍的bootstrap学习系列之使用bootstrap typeahead组件实现百度下拉效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!