Sublinhado 官网: http: //undercorejs.org/
参考文档: http: //www.css88.com/doc/undercore/
页面代码
@{Viewbag.title = "index";} <script src = "scripts/bootstrap-typeahead.js"> </script> <script src = "scripts/subscore-min.js"> </sCript> <div>简单使用
<div style = "margem: 10px 50px"> <etiqueta para = "product_search"> pesquisa do produto: </label> <input id = "product_search" type = "text" data-provide = "typeAhead" data-source = '["data1", "data2", "data3"]'/> </</>
使用脚本填充数据
<div style = "margem: 10px 50px"> <etiqueta para = "product_search"> pesquisa do produto: </label> <input id = "product_search_js" type = "text" data-provide = "typeaHeArt"> </div> <script type = "text/javascript"> (document). = function () {var that = this; setTimeout (function () {that.hide ()}, 250);}; $ ('#product_search_js'). TypeAhead ({origem: function (query, process) {return ["js 数据 1", "js 数据 2", "js 数据 3"; "<==";}, Updater: function (item) {console.log ("'" + item + "' selecionado.");支持 Ajax 获取数据
<div style = "margin: 10px 50px"> <etiqueta para = "product_search"> pesquisa do produto: </label> <input id = "product_search_ajax" type = "text" data-provide = "typeaHeaHead"> </div> <script type = "text/javscript"> ('#produto_search_ajax_ajax ") parâmetro = {query: query}; $. post ('@url.action ("ajaxservice")', parâmetro, function (data) {process (data);});}}); </sCript>使用对象数据
<div style = "margem: 10px 50px"> <etiqueta para = "product_search"> pesquisa do produto: </crety> <input id = "product_search_object" type = "text" data-provide = "typeaHeheaHead"> </div> <script type = "text/javascript"> $ (function () {var prodecs 499.98}, {id: 1, nome: "object2", preço: 134.99}, {id: 2, nome: "object3", preço: 49.95}]; $ ('#Product_Search_Object'). TypeAhead ({fonte: function, Process) {var Results = _.Map ') Product.Name;}); Process (Results);}, Highlighter: function (item) {return "==>" + item + "<==";}, updater: function (item) {console.log ("'" + item + "' selecionado.");控制器
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 (dados);}效果图展示如下
下面继续给大家介绍 Bootstrap 学习系列之 Bootstrap TypeAhead 组件实现百度下拉效果 (续 续)
以上所述是小编给大家介绍的 Bootstrap 学习系列之使用 Bootstrap Typeahehead 组件实现百度下拉效果 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！