BootStrap Typeahead components of the Bootstrap Learning Series implement Baidu pull-down effect (continued) and bootstraptypeahead

BootStrap Typeahead components of the Bootstrap Learning Series implement Baidu pull-down effect (continued) and bootstraptypeahead

Next, I will introduce the Bootstrap learning series using the Bootstrap Typeahead component to implement the Baidu drop-down effect.

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

Http://twitter.github.io/typeahead.js/

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

Https://github.com/twitter/typeahead.js (Click Download zipdownload typeahead.js-master.zip)

First, we will show you:

1. Implementation

HTML

Tip: 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. 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 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 = "Enter name "}) </div> @ Html. hidden ("getInputName", Url. action ("getindium UtName ") <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 prompt drop-down // <summary> // get name prompt drop-down // </summary> /// <returns> </returns> public ActionResult 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) ;}# endregionpublic List <TypeaheadModel> GetData () {List <TypeaheadModel> list = new List <TypeaheadModel> (); 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 <10; 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 selected text box /// </summary> public string value {get; set ;}}

The above is the BootStrap Typeahead component of the Bootstrap Learning Series introduced by xiaobian 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!