Bootstrap-Typeakheadkomponente der Bootstrap Learning-Serie realisiert den Baidu-Pulldown-Effekt (Fortsetzung)

Als nächstes werde ich Ihnen im vorherigen Artikel die Bootstrap Learning-Serie mit der Bootstrap-TypeAhead-Komponente vorstellen, um den Baidu-Pulldown-Effekt zu erzielen.

Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.

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

Beispiel: http://twitter.github.io/typeahead.js/examples/ (Dieser Artikel zeigt: Open -Source -Projekte von Twitter)

Projektquellcode: https://github.com/twitter/typeahead.js (klicken

Lassen Sie mich Ihnen zuerst die Renderings zeigen:

1. Implementierung

Html

Tipp: Beispiele.CSS ist die CSS -Datei in der Instanz

 <link type = "text/css" href = "@url.content (" ~/scripts/typeAdhead/Beispiele. src = "@url.content (" ~/scripts/typeAeAt/hogan-2.0.0.js ")" type = "text/javaScript"> </script> <script src = "@url.content (" ~/scripts/typeAwhead/hogan-2.0.0.js ")" type ")" type = "text/javascript" src="@Url.Content("~/Scripts/typeahead/underscore-min.js")" type="text/javascript"></script><div><div style="margin: 10px 50px"><div><label>Name</label><div>@Html.TextBox("InputName", "", new { @class = "inputName Form-control ", placeholder =" Bitte geben Sie einen Namen "}) </div> </div> </div>@html.hidden (" getInputName ", url.action (" getInputName ")) <script type =" text/javascript "> $ ('. $ ("#getInputName"). val () + '/? query =%query', Vorlage: ['<p> {{{viPname}} </p>', '<p> {{name}} </p>', '<p> {{Beschreibung}} </p>']. Hogan}); </script> </div>

Regler

 #region Get Name Eingabeaufforderung ab. 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 typeAeAtheadmodel (); für (int i = 0; i <5; i ++) {model = new typeAeAtmodel (); Modell.Description = "d"; modell.vipname = "v"; Modell.Name = "a" + i.toString (); Modell.Value = "a" + i.ToString (); i ++) {model = new typeAeAeDModel (); model.description = ""; model.vipname = ""; model

Modell

 public class typeAadmodel {public String name {get; Satz; } public String vipName {get; Satz; } öffentliche Zeichenfolge Beschreibung {get; Satz; } /// <summary> /// Der Wert des ausgewählten Textfelds /// </summary> öffentlicher String -Wert {get; Satz; }}

Das obige ist die Bootstrap-Typeakheadkomponente der Bootstrap Learning-Serie, die Ihnen vom Editor vorgestellt wurde, um den Baidu-Pulldown-Effekt zu erzielen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!