A continuación, en el artículo anterior, le presentaré la serie Bootstrap Learning, utilizando el componente Bootstrap Typeahead para lograr el efecto desplegable Baidu.
Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
Oficial: http://twitter.github.io/typeeahead.js/
Ejemplo: http://twitter.github.io/typeeahead.js/examples/ (este artículo muestra: Proyectos de código abierto de Twitter)
Código fuente del proyecto: https://github.com/twitter/typeeahead.js (haga clic en Descargar zip para descargar typeahead.js-master.zip)
Déjame mostrarte las representaciones primero:
1. Implementación
Html
Consejo: ejemplos.css es el archivo CSS en la instancia
<link type = "text/css" href = "@url.content (" ~/scripts/typeahead/ejemplos.css ")" rel = "stylesheet"/> <script src = "@url.content (" ~/scripts/typeahead/typeahead.js ")" type = "text/javaScript"> </script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.js ")" type = "text/javascript"> </script> <script src = "@url.content (" ~/scripts/typeahead/hogan-200 src = "@url.content (" ~/scripts/typeahead/subscore-min.js ")" type = "text/javaScript"> </script> <div> <div style = "margin: 10px 50px"> <div> <div> name> name </sello> <iv>@html.Textbox ("EntryName" Form-Control ", PlaceHolder =" Por favor ingrese un nombre "}) </div> </div> </div>@html.hidden (" getInputName ", url.action (" getInputName ")) <script type =" text/javaScript "> $ ('. inputName'). typeahead ({name:" inputName ', remoto: $ ("##"). +'/?Controlador
#region obtenga el nombre de su nombre //// <summary> /// get Name Semint Silw con el nombre //// </summary> /// <surns> </return> public ActionResult GetInputName (String Query) {var list = new List <typeaheadModel> (); if (! String.isNullorWhiteSpace (Query)) {Query. GetData ()) {if (item.name.contains (query)) {list.add (item);}}} return json (list, jsonRequestBehavior.Allowget);}#endregionPublic List <PoeaHeadModel> getData () {TypeeHeadModel> list = New List <SpeaHeadel> (); 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" + iToString (); // list.add (model);} para (inti (i = 3; i = 3; i <1 10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i <10; i ++) {model = new typeaHeadModel (); model.description = ""; model.vipname = ""; model.name = "b" + i.ToString (); model.value = "b" + i.ToString (); list.Add (modelo);} Lista de retorno;}Modelo
clase pública typeaheadmodel {nombre de cadena public {get; colocar; } public String Vipname {get; colocar; } Descripción de cadena pública {get; colocar; } /// <summary> /// El valor del cuadro de texto seleccionado /// </sumario> valor de cadena public {get; colocar; }}Lo anterior es el componente Bootstrap Typeahead de la serie Bootstrap Learning presentada por el editor para lograr el efecto desplegable Baidu. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!