Ensuite, dans l'article précédent, je vous présenterai la série Bootstrap Learning, en utilisant le composant Bootstrap Typeahead pour obtenir l'effet de Baidu.
Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
OFFICIEL: http://twitter.github.io/typeahead.js/
Exemple: http://twitter.github.io/typeahead.js/examples/ (Cet article montre: Projets open source par Twitter)
Code source du projet: https://github.com/twitter/typeahead.js (cliquez sur Télécharger Zip pour télécharger Typeahead.js-Master.zip)
Permettez-moi de vous montrer les rendus en premier:
1. Implémentation
Html
Astuce: Exemples.css est le fichier CSS dans l'instance
<link type = "text / css" href = "@ url.content (" ~ / scripts / typehead / examples.css ")" rel = "Stylesheet" /> <script src = "@ url.content (" ~ / scripts / typeahead / typeahead.js ")" type = "text / javascript"> </ script> src = "@ url.content (" ~ / scripts / typehead / hogan-2.0.0.js ")" type = "text / javascrip src = "@ url.content (" ~ / scripts / typehead / sous-ore-min.js ")" type = "text / javascrip formulaire de formulaire ", placeholder =" Veuillez entrer un nom "}) </div> </div> </div> @ html.hidden (" getInputName ", url.action (" getInputName ")) <script type =" Text / JavaScrip + '/? Query =% Query', modèle: ['<p> {{vipname}} </p>', '<p> {{name}} </p>', '<p> {{description}} </p>']. JOIN (''), limite: 10, moteur: hogan}); </cript> </ / / div>Contrôleur
#Region Get Name invite till /// <summary> /// get name invite till ////// </summary> /// <returns> </ returns> public actionResult getInputName (String Query) {var list = new list <typeaheadModel> (); if (! string.isnullorwhitespace (query)) {Query = Query. GetData ()) {if (item.name.contains (query)) {list.add (item);}}} return json (list, jsonrequestbehavior.allowget);} # EndregionPublic list <typeaheadmodel> getData () {list <typeheadModel> list = new list list <typeahead> () = new TypeaHeadModel (); pour (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.addd (modèle); 10;Modèle
classe publique TypeaheadModel {public String Name {get; ensemble; } public String vipname {get; ensemble; } public String Description {get; ensemble; } /// <summary> /// La valeur de la zone de texte sélectionnée /// </summary> Valeur de chaîne publique {get; ensemble; }}Ce qui précède est le composant Bootstrap Typeahead de la série d'apprentissage bootstrap qui vous a été introduit par l'éditeur pour réaliser l'effet de Baidu. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!