Esta é uma das desvantagens dos códigos de publicação: a caixa de pesquisa está quase quebrada pelos internautas! ! ! Algumas pessoas deliberadamente entram nos espaços, algumas pessoas entram ou 1 = 1, algumas pessoas alertam, outras entram em HTML ... e parece que ainda estão jogando, então deixe -as ir, desde que estejam felizes.
Nos projetos, a função de conclusão automática da caixa de entrada é frequentemente usada, assim como caixas de pesquisa como Baidu e Taobao: quando o usuário insere a letra e a palavra -chave inicial, o plano de fundo retornará rapidamente as entradas relacionadas e as exibirá à recepção para os usuários escolherem e melhorarem a experiência do usuário. Obviamente, a função de conclusão deste projeto não é comparável à tecnologia desses principais fabricantes, mas é mais do que suficiente para pesquisas no local.
Existem dois plug-ins principais de conclusão automática com os quais entramos em contato : AutoComplete e Typeahead . Este site usa o TypeAhead.
jQueryui-autocompleto
Conclusão automática plug-in-bootstrap-3-typeahead
Descrição do parâmetro relacionado:
Fonte: function (consulta, processo) {}. A consulta representa a sequência na caixa de entrada de texto atual. Neste método, os dados podem ser solicitados do plano de fundo (um objeto JSON na forma de uma matriz) através do Ajax e, em seguida, o objeto retornado é usado como um parâmetro do processo;
formatItem : function (item) {}. O objeto JSON específico que retorna os dados é convertido em um formato de string, que é usado para exibi -lo na lista de prompts, e o valor de retorno é: string;
setValue : function (item) {}. Quando um item na lista de prompts for selecionado, defina o valor exibido na caixa de entrada de texto e o valor que realmente precisa ser obtido. Retorno Formato do Valor: {'Data-Value': Item ["Propriedade do item do valor exibido na caixa de entrada"], 'Valor real': item ["Propriedade do item do valor real que precisa ser obtido"]}, posteriormente, esse valor pode ser obtido através da propriedade de valor real da caixa de entrada de texto;
Itens : o número máximo de conjuntos de resultados para avisos de conclusão automática, padrão: 8;
MinLength: O processo de correspondência será executado apenas quando a sequência na caixa de entrada de texto atual atingir o valor da propriedade. Padrão: 1;
Atraso : Após especificar o número de milissegundos de atraso, os dados são solicitados em segundo plano para impedir que solicitações frequentes do fundo sejam frequentemente causadas por entrada rápida. Padrão: 500
O código específico é o seguinte:
Primeiro introduza o arquivo JS
<script src = "~/scripts/jQuery-1.9.0.js"> </script> <script src = "~/scripts/bootstrap.js"> </script> <script src = "~/content/js/bootstrap3-typeahead.js"> </script>
Código HTML:
<form id = "searchform" role = "search" target = "_ Blank" método = "get" action = "/search/index"> <div> <input type = "text" id = "searchwords" name = "searchwords" por favor, provide = "typeAtheeAHeaHeaHeaTelete". id = "SearchBtn"> pesquisa </butut> </morm>
JS para processamento de termos de pesquisa relacionada:
// Pesquisa concluída automaticamente; register the search box with the automatic association completion event autoComplete: function () {jQuery('#searchWords').typeahead({source: function (query, process) {//query is the input value jQuery.getJSON('/Search/GetHotSearchItems', { "query": query }, function (data) {process(data);});},updater: function (item) {retorna item.replace (/<a (.+?) <// a>/"" ");Processamento de Background/Search/GethotSearchItems:
#region 2.0 jQuery typeaheead plug-in de maneira assíncrona obtém palavras quentes e completa automaticamente a caixa de pesquisa; ActionResult GethoTSearchItems () /// <summary> /// 2.0 JQuery TypeAead Plug-in obtém assíncrono Palavras de pesquisa e completa automaticamente a caixa de pesquisa> //// sempre que a pesquisa, os detalhes da pesquisa///////, a pesquisa//////////////ter <Trackns> json </leturns> public ActionResult gethoTSearchItems () {// 2.1 Obtenha o termo de pesquisa atual "Query" string Query = request ["consulher"]; // 2.2 consulta a coleta de palavras -hot word deste campo do banco de dados ibll.isearrankService HotService = OperateHelpers.CurSent.Cursent.CurSentent.Clll.ISEarrEarchService HotService = OperateHelpers.CurSent.CurSentent.CursErtent.CurSentent.CursErtErSeiEIVErvice.ImerService. Coleção contendo esse termo de pesquisa do banco de dados, classifique -o por pesquisas e retorne os dados ao typeaHehead.jslist <searchrank> hotList = hotService.getDatalistby (s => s.Keyword.contains (query), s => s.searchTimes); if (hotlist! H.SearchTimes}). Tolist (); ArrayList List2 = new ArrayList (); int i = 1; foreach (var item na lista1) {list2.add (String.Format ("<a class =/" CAT/"Href =/"#/"> {0} </a> (1}", i, iTHE. JsonRequestBeHavior.Allowget);} else {return json ("", jsonRequestBehavior.allowget);}} ##endregionVamos fazer isso por enquanto.