The Bootstrap learning series uses the Bootstrap Typeahead component to implement the Baidu drop-down effect, bootstraptypeahead

The Bootstrap learning series uses the Bootstrap Typeahead component to implement the Baidu drop-down effect, bootstraptypeahead

UnderScore Official Website: http://underscorejs.org/

Reference: http://www.css88.com/doc/underscore/

Page code:

@{ViewBag.Title = "Index";}<script src="Scripts/bootstrap-typeahead.js"></script><script src="Scripts/underscore-min.js"></script><div>

Easy to use

<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>

Use scripts to fill data

<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 data 1", "JS data 2", "JS data 3"] ;}, highlighter: function (item) {return "=>" + item + "<=";}, updater: function (item) {console. log ("'" + item + "' selected. "); // the browser console outputs $ (" # product_search "). val (item); return item ;}}) ;}) </script>

Support for Ajax Data Retrieval

<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>

Use object data

<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> 

Controller

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);} 

As shown below:

Next we will continue to introduce the BootStrap Typeahead component of the Bootstrap Learning Series to achieve the Baidu pull-down effect (continued)

The above section describes how to use the Bootstrap Typeahead component in the Bootstrap Learning Series to implement the Baidu drop-down effect. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!