Bootstrap Learning series of bootstrap Typeahead components to achieve the effect of Baidu Drop-down (continued) _javascript Skills

Then the content of the article, in the last chapter to introduce the Bootstrap Learning series of the use of Bootstrap Typeahead components to achieve the effect of Baidu Drop-down

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Official: http://twitter.github.io/typeahead.js/

Example: http://twitter.github.io/typeahead.js/examples/(This article shows: Open Source Projects by Twitter)

Project Source: https://github.com/twitter/typeahead.js (click download zip download Typeahead.js-master.zip)

First to show you the effect of the picture:

1. To achieve

Html

Hint: EXAMPLES.CSS is the CSS file in the instance

<link type= "Text/css" href= "@Url. Content (" ~/scripts/typeahead/examples.css ")" rel= "stylesheet"/> <script Src= "@Url. Content (" ~/scripts/typeahead/typeahead.js ")" Type= "Text/javascript" ></script> <script src= " @Url. Content ("~/scripts/typeahead/hogan-2.0.0.js") "Type=" Text/javascript "></script> <script src=" @ Url.content ("~/scripts/typeahead/underscore-min.js") "Type=" Text/javascript "></script> <div> < Div style= "margin:10px 50px" class= "col-md-3" > <div class= "Form-group example-twitter-oss" > <label class= " Col-md-4 Control-label "> Name </label> <div class=" col-md-7 "> @Html. TextBox (" InputName "," ", new {@class =" InputName Form-control ", placeholder =" Please enter Name "}) </div> </div> </div> @Html. Hidden (" Getinputname ",
Url.action ("Getinputname")) <script type= "Text/javascript" > $ ('. InputName '). Typeahead ({name: ' InputName ', Remote: $ ("#getInputName"). Val () + '/?query=%query ', Template: [' <p class="Repo-language" >{{vipname}}</p> ', ' <p class= ' repo-name ' >{{name}}</p> ', ' <p class= '
Repo-description ">{{description}}</p> '].join ("), Limit:10, Engine:hogan});  </script> </div>

Controller

#region Get name hint dropdown///<summary>///get name hint dropdown///</summary>///<returns></returns> public Actionr Esult getinputname (string query) {var list = new list<typeaheadmodel> (); if (!string. Isnullorwhitespace (query)) {query = query.
Trim (); foreach (var item in GetData ()) {if (item.name.Contains (query)) {list.
ADD (item);
}} return Json (list, jsonrequestbehavior.allowget); #endregion public list<typeaheadmodel> GetData () {list<typeaheadmodel> List = new list<typeaheadmodel&
gt; ();
Typeaheadmodel model = new Typeaheadmodel (); for (int i = 0; i < 5; i++) {model = new Typeaheadmodel (); model.description = "D"; model.vipname = "V"; model.name =
"A" + i.tostring (); Model.value = "A" + i.tostring ();//list.
ADD (model);
for (int i = 3; I < i++) {model = new Typeaheadmodel (); model.description = "";
Model.vipname = "";
Model.name = "B" + i.tostring ();
Model.value = "B" + i.tostring (); List.
ADD (model);
} return list;  }

Model

public class Typeaheadmodel
{public
string name {get; set;}
public string Vipname {get; set;}
public string Description {get; set;}
<summary>
///The value of the text box
///</summary> Public
string value {get; set;}
}

The above is a small set to introduce the Bootstrap learning series 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!