Esta es una de las desventajas de los códigos de publicación: ¡el cuadro de búsqueda está casi roto por los internautas! ! ! Algunas personas entran deliberadamente en espacios, algunas personas ingresan o 1 = 1, algunas personas están alertas, algunas personas ingresan a HTML ... y parece que todavía están jugando, así que déjalos ir, siempre y cuando estén felices.
En los proyectos, la función de finalización automática del cuadro de entrada a menudo se usa, al igual que los cuadros de búsqueda como Baidu y Taobao: cuando el usuario ingresa la letra y la palabra clave inicial, el fondo devolverá rápidamente las entradas relacionadas y las mostrará a la recepción para que los usuarios elijan y mejoren la experiencia del usuario. Por supuesto, la función de finalización de este proyecto no es comparable a la tecnología de estos principales fabricantes, pero es más que suficiente para las búsquedas en el sitio.
Hay dos complementos de finalización automáticos principales con los que hemos entrado en contacto : Autocomplete y Typeehead . Este sitio usa Typeahead.
jQueryui-outocompleto
Complemento de finalización automática-bootstrap-3-typerea
Descripción del parámetro relacionado:
Fuente: función (consulta, proceso) {}. La consulta representa la cadena en el cuadro de entrada de texto actual. En este método, los datos se pueden solicitar desde el fondo (un objeto JSON en forma de una matriz) a través de AJAX, y luego el objeto devuelto se usa como un parámetro del proceso;
formatitem : function (elemento) {}. El objeto JSON específico que devuelve los datos se convierte en un formato de cadena, que se utiliza para mostrarlo en la lista de indicaciones, y el valor de retorno es: String;
setValue : function (elemento) {}. Cuando se seleccione un elemento en la lista de indicaciones, establezca el valor que se muestra en el cuadro de entrada de texto y el valor que realmente debe obtenerse. Formato de valor de retorno: {'Value de datos': ítem ["Propiedad de elemento del valor que se muestra en el cuadro de entrada"], 'Valor real': ítem ["Propiedad del elemento del valor real que debe obtenerse"]}, más tarde, este valor se puede obtener a través de la propiedad de valor real del cuadro de entrada del texto;
Elementos : el número máximo de conjuntos de resultados para las indicaciones automáticas de finalización, predeterminado: 8;
MinLength: el proceso de coincidencia se realizará solo cuando la cadena en el cuadro de entrada de texto actual alcanza el valor de la propiedad. Predeterminado: 1;
Retraso : después de especificar el número de milisegundos de retraso, los datos se solicitan de los antecedentes para evitar que las solicitudes frecuentes de los antecedentes sean causadas con frecuencia por una entrada rápida. Valor predeterminado: 500
El código específico es el siguiente:
Primero introducir el archivo JS
<script src = "~/scripts/jQuery-1.9.0.js"> </script> <script src = "~/scripts/bootstrap.js"> </script> <script src = "~/content/js/bootstrap3-typeeahead.js"> </script> </script>
Código HTML:
<form de formular id = "SearchForm" role = "Search" Target = "_ Blank" Method = "Get" Action = "/Search/Index"> <VIV> <DivInpy Type = "Text" id = "SearchWords" name = "SearchWords" Data-Provide = "Typeahead" Autocompletete = "Off" Off "Place Holder =" Por favor, ingrese la palabra clave para buscar "> </divit <bon> id = "SearchBtn"> Search </boton> </orm>
JS para procesar términos de búsqueda relacionados:
// buscar automáticamente completar; 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) {return item.replace (/<a (.+?) <// a>/, "");Procesamiento de fondo/búsqueda/gethotsearchitems:
#Region 2.0 JQuery Typeahead Plug-in obtiene asincrónicamente palabras de búsqueda y completa automáticamente el cuadro de búsqueda; ActionResult GethotSearchitems () /// <summary> /// 2.0 JQuery Typehead El complemento obtiene asynchronamente las palabras de búsqueda y completa automáticamente el cuadro de búsqueda> //// cada vez que la búsqueda de tiempo, los detalles de la búsqueda del usuario se incluyen en la biblioteca> //// Tarea temporizada cuenta el número de términos de búsqueda cada 10 minutos y actualizaciones de las estadísticas de la búsqueda de la búsqueda //// <Estreves> JSON </svolds> public ActionResult GetHotSearchItems () {// 2.1 Obtenga el término de búsqueda actual "Consulta" String Query = request ["Query"]; // 2.2 Consulta la colección de palabras candentes de este campo de la base de datos iBll.ISearchRankService HotService = operatehelper.Con.Con.Consessession.Servicessession.SearchSearchSeChsankservice; que contiene este término de búsqueda de la base de datos, ordenelo mediante búsquedas y devuelva los datos a typeahead.jslist <ingsechRank> hotList = hotService.getDatalistby (s => s.keyword.contains (consulta), s => s.SearchTimes); if (hotList! = Null) {var list1 = Hotlist.select (h => new {name {name); si hotList! = null) {var list1 = hotlist.select (h => new {name {name); si hotList! = Null) {var list1 = Hotlist.select (h => new {name name); if 4 H.SearchTimes}). Tolist (); ArrayList list2 = new ArrayList (); int i = 1; foreach (var item en list1) {list2.add (string.format ("<a class =/" cat/"href =/"#/"> {0} </a> {1}", iem.name)); i++;} JsonRequestBehavior.Anlowget);} else {return json ("", jsonRequestBehavior.Anlowget);}} #EnDregionHagámoslo por ahora.