Em seguida, no artigo anterior, apresentarei a você a série de aprendizado de Bootstrap, usando o componente de bootstrap typeeahead para obter o efeito pull-down do Baidu.
O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
OFICIAL: http://twitter.github.io/typeahead.js/
Exemplo: http://twitter.github.io/typeahead.js/examples/ (este artigo mostra: Projetos de código aberto pelo Twitter)
Código fonte do projeto: https://github.com/twitter/typeahead.js (clique em Baixe o zip para baixar o typeahead.js-master.zip)
Deixe -me mostrar as renderizações primeiro:
1. Implementação
Html
Dica: exemplos.css é o arquivo CSS na instância
<link type = "text/css" href = "@url.content (" ~/scripts/typeahehead/exemplos.css ")" rel = "stylesheet"/> <script src = "@url.Content (" ~/scripts/typeaeaHehead.js ")" tipo = "typet =" text/jav ("~ JAVTTS/JAVTR/JAVERRIRRETT/" Text/Jav "/jav"/jav ("~ Jav/Jav"/jav "/jav (" ~ Jav/Jav "/jav"/jav "/jav (" ~ JAVTTS/JAVEIRRIRTR/JAVEIRRIRT (") src = "@url.content (" ~/scripts/typeAehehead/hogan-2.0.0.js ")" type = "text/javascript"> </script> <script src = "@url.content (" ~/scripts/typeaHead/hogan-2.0.0.js ") 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 ", Planteholder =" Por favor, digite um nome "}) </div> </div> </div>@html.hidden (" getInputName ", url.action (" getInputName ")) <script type =" text/javascript "> $ ('n .NputName")) <timehead ({Name: Name: Name: Name: Name: inputinEn)). $ ("#getInputName"). Hogan}); </script> </div>Controlador
#Region Obtenha o prompt de nome Prompt para baixo /// <summary> /// Obtenha o prompt de nome Prompt para baixo //// </summary> /// <Returns> </rortans> public ActionResult getInputName (string query) {var list = new List <pytyeaHeeHeaHeadModel> (); se (! GetData ()) {if (item.name.contains (Query)) {list.add (item);}}} retorna json (list, jsonRequestBeHavior.allowget);}#endregionpublic list <TeeaHeheadModel> getData () {list <tipeAeAeAtemodel> novo typeAeHeadModel (); for (int i = 0; i <5; i ++) {model = new typeAeHeadModel (); model.description = "d"; model.vipName = "v"; model.name = "a" a " + i.tostring (); model.value =" a "A" + i.tosTring (); i ++) {model = new typeAeHeHeadModel (); model.description = ""; model.vipName = ""; model.name = "b" + i.toString (); model.value = "b" + i.toString (); list.add (modelo);} Lista de retorno;}Modelo
public classe typeAeHeadModel {name public string {get; definir; } public string VipName {get; definir; } public string description {get; definir; } /// <summary> /// o valor da caixa de texto selecionada /// </summary> public String Value {get; definir; }}O acima exposto é o componente de bootstrap typeeahead da série de aprendizado de bootstrap, introduzida a você pelo editor para obter o efeito pull-down do Baidu. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!