Bootstrap Learning Series using Bootstrap Typeahead components to achieve the Baidu Drop-down effect _javascript Skills

Underscore official website: http://underscorejs.org/

Reference Document: 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>

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

Populating data with scripts

<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 = this;
settimeout (function () {that.hide ()},);
$ (' #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 access to data

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

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

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

The effect chart shows the following:

Next continue to introduce bootstrap learning series of bootstrap Typeahead components to achieve Baidu Drop-down effect (continued)

The above is a small set to introduce the Bootstrap Learning series of the use of Bootstrap Typeahead components to achieve the effect of Baidu Drop-down, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!