C'est l'un des inconvénients des codes de publication: la zone de recherche est presque cassée par les internautes! ! ! Certaines personnes entrent délibérément dans les espaces, certaines personnes entrent ou 1 = 1, certaines personnes alertes, certaines personnes entrent en HTML ... et il semble qu'ils jouent toujours, alors laissez-les partir, tant qu'ils sont heureux.
Dans les projets, la fonction d'achèvement automatique de la boîte d'entrée est souvent utilisée, tout comme les cases de recherche telles que Baidu et Taobao: lorsque l'utilisateur entre dans la lettre initiale et le mot-clé, l'arrière-plan renvoie rapidement les entrées connexes et les affichera à la réception pour que les utilisateurs puissent choisir et améliorer l'expérience utilisateur. Bien sûr, la fonction d'achèvement de ce projet n'est pas comparable à la technologie de ces principaux fabricants, mais il est plus que suffisant pour les recherches sur place.
Il y a deux principaux plug-ins d'achèvement automatique avec lesquels nous sommes entrés en contact : la saisie semi-automatique et le type de type . Ce site utilise Typeahead.
jQueryui-Auto-complete
Plug-in-bootstrap-3 de l'achèvement automatique
Description du paramètre connexe:
Source: fonction (requête, processus) {}. La requête représente la chaîne dans la zone d'entrée de texte actuelle. Dans cette méthode, les données peuvent être demandées à l'arrière-plan (un objet JSON sous la forme d'un tableau) via AJAX, puis l'objet retourné est utilisé comme paramètre du processus;
Formatitem : fonction (item) {}. L'objet JSON spécifique qui renvoie les données est converti en format de chaîne, qui est utilisé pour l'afficher dans la liste d'invites, et la valeur de retour est: String;
setValue : fonction (item) {}. Lorsqu'un élément de la liste des invites est sélectionné, définissez la valeur affichée dans la zone d'entrée de texte et la valeur qui doit réellement être obtenue. RETOUR VALEUR FORMAT: {'Data-Value': élément ["Propriété d'élément de la valeur affichée dans la zone de saisie"], 'Real-Value': élément ["Propriété d'élément de la valeur réelle qui doit être obtenue"]]}, plus tard, cette valeur peut être obtenue via la propriété de valeur réelle de la zone d'entrée de texte;
Éléments : le nombre maximum de jeux de résultats pour les invites d'achèvement automatique, par défaut: 8;
MinLength: le processus de correspondance ne sera effectué que lorsque la chaîne dans la zone d'entrée de texte actuelle atteint la valeur de la propriété. Par défaut: 1;
Délai : Après avoir spécifié le nombre de millisecondes de retard, des données sont demandées à l'arrière-plan pour empêcher les demandes fréquentes de l'arrière-plan d'être fréquemment causées par une entrée rapide. Par défaut: 500
Le code spécifique est le suivant:
Introduire d'abord le fichier JS
<script src = "~ / scripts / jQuery-1.9.0.js"> </ script> <script src = "~ / scripts / bootstrap.js"> </ script> <script src = "~ / contenu / js / bootstrap3-typeahead.js"> </ script>
Code html:
<form id = "searchform" role = "search" target = "_ blanc" méthode = "get" action = "/ search / index"> <v> <input type = "text" id = "searchwords" name = "searchwords" Data-Provide = "typehead" AutoC-Aomplete = "OFF" PlaceHolder = "Veuillez saisir le mot-clé à Search pour"> </ div> <bouton type = "soumettre" id = "searchbtn"> Rechercher </fontificateur> </ form>
JS pour le traitement des termes de recherche connexes:
// Recherchez automatiquement; Enregistrez la zone de recherche avec l'événement d'achèvement de l'association automatique Assommée automatique: function () {jQuery ('# searchwords'). Typeahead ({source: function (query, process) {// Query est la valeur d'entrée jQuery.getjson ('/ search / gethototsearchitems', {"Query": Query}, function (data) {process (process);}); {return item.replace (/ <a (. +?) <// a> /, "");Traitement en arrière-plan / Search / GethotesearchItems:
#Region 2.0 jQuery Typeahead Plug-in obtient de manière asynchrone des mots chauds de recherche et complète automatiquement la zone de recherche; ActionResult GethotesearchItems () /// <summary> /// 2.0 jQuery Typeahead Plug-in obtient de manière asynchrone des mots chauds et termine automatiquement la zone de recherche> //// chaque fois la recherche, les détails de la recherche d'utilisateurs sont inclus dans la bibliothèque> //// Tank Task compte le nombre de termes de recherche toutes les 10 minutes et les mises à jour les statistiques du tableau Searchrand <retourne> JSON </ returns> public ActionResult gethotesearchItems () {// 2.1 Obtenez le terme de recherche actuel "Query" String Query = request ["Query"]; // 2.2 requête la collection de mots chauds de ce champ à partir de la base de données Ibll.IsearchRankService hotService = operhelper.current. contenant ce terme de recherche à partir de la base de données, triez-le par des recherches et renvoyez les données à typeahead.jslist <earchRank> hotlist = hotService.getDatalistBy (s => s.keyword.contains (query), s => s.searchTimes); if (hotlist! = null) {var list1 = hotlist.select (h => new {name = h.key, Times1 = Hotlist.Select (h => new {name = h.key, Timesword = Times = Times = Times) H.SearchTimes}). Tolist (); ArrayList list2 = new ArrayList (); int i = 1; foreach (var élément dans list1) {list2.add (string.format ("<a class = /" Cat / "href = /" # / "> {0} </a> {1}", i, item.name)); i ++;} RETOUR JSON (List2, i, item.name)); JSONREQUESTBEHAVIOR.ALLOWGET);} else {return json ("", jsonrequestbehavior.allowget);}} #endregionFaisons-le pour le moment.