Dies ist einer der Nachteile von Posting -Codes: Das Suchfeld wird von den Internetnutzern fast unterbrochen! ! ! Einige Leute betreten absichtlich Räume, manche betreten oder 1 = 1, manche Leute, manche Leute treten in HTML ein ... und es scheint, dass sie immer noch spielen, also lass sie gehen, solange sie glücklich sind.
In Projekten wird häufig die automatische Abschlussfunktion des Eingabefelds verwendet, genau wie Suchfelder wie Baidu und Taobao: Wenn der Benutzer in das Anfangsbuchstaben und das Schlüsselwort eingibt, gibt der Hintergrund die zugehörigen Einträge schnell zurück und zeigt sie an die Rezeption an, damit die Benutzer die Benutzererfahrung auswählen und verbessern können. Natürlich ist die Abschlussfunktion dieses Projekts nicht mit der Technologie dieser großen Hersteller vergleichbar, aber für Suchanfragen vor Ort mehr als ausreichend.
Es gibt zwei automatische Haupt-Plugions-Plug-Ins, mit denen wir in Kontakt gekommen sind : Autokaponete und TypeAwhead . Diese Seite verwendet Typeakhead.
JQueryui-autoPomplete
Automatische Abschluss-Plug-in-Stiefelstiefel-3-Type
Verwandte Parameterbeschreibung:
Quelle: Funktion (Abfrage, Prozess) {}. Die Abfrage repräsentiert die Zeichenfolge im aktuellen Texteingangsfeld. In dieser Methode können Daten aus dem Hintergrund (ein JSON -Objekt in Form eines Arrays) über AJAX angefordert werden, und dann wird das zurückgegebene Objekt als Parameter des Prozesses verwendet.
FormatItem : Funktion (Element) {}. Das spezifische JSON -Objekt, das die Daten zurückgibt, wird in ein String -Format konvertiert, mit dem sie in der Aufforderungsliste angezeigt werden, und der Rückgabewert ist: String;
setValue : function (item) {}. Wenn ein Element in der Aufforderungsliste ausgewählt ist, legen Sie den im Texteingangsfeld angezeigten Wert und den Wert fest, der tatsächlich erhalten werden muss. Rückgabewertformat: {'Datenwert': item ["Element Eigenschaft des im Eingangsfelds angezeigten Werts"], 'Real-Wert': item ["Elementeigenschaft des tatsächlichen Werts, der erhalten werden muss"]}, später kann dieser Wert über die reale Eigenschaft des Texteingangsfeldes erhalten werden.
Elemente : Die maximale Anzahl der Ergebnissätze für automatische Abschlussanforderungen, Standardeinstellung: 8;
Minlength: Der Übereinstimmungsprozess wird nur ausgeführt, wenn die Zeichenfolge im aktuellen Texteingangsfeld den Eigenschaftswert erreicht. Standard: 1;
Verzögerung : Nach Angabe der Anzahl der Verzögerungs -Millisekunden werden Daten vom Hintergrund angefordert, um zu verhindern, dass häufige Anforderungen des Hintergrunds häufig durch schnelle Eingabe verursacht werden. Standard: 500
Der spezifische Code lautet wie folgt:
Stellen Sie zuerst die JS -Datei vor
<script src = "~/scripts/jQuery-1.9.0.js"> </script> <script src = "~/scripts/bootstrap.js"> </script> <script src = "~/content/js/bootstrap3-typeahead.js"> </script>
HTML -Code:
<Formular id = "suchform" rollen = "such" target = "_ leer" method = "get" action = "/such/index"> <div> <Eingabe type = "text" id = "suchwords" name = "suchwords" data-provide = "typeAdhead" autocpromplete = "off" placeholder = "Bitte geben Sie das Schlüsselwort ein, um nach"> </</Dividtyps zu suchen ". id = "searchBtn"> such </button> </form>
JS für die Verarbeitung verwandter Suchbegriffe:
// automatisch durchsuchen; Registrieren Sie das Suchfeld mit dem automatischen Association -Abschluss -Ereignis automatisch {return item.replace (/<a (.+?) <// a>/, "");Hintergrundverarbeitung/Suche/GethotssearchItems:
#region 2.0 JQuery TypeAhead-Plug-In asynchron sucht Such-heiße Wörter und vervollständigt automatisch das Suchfeld. ActionResult GethotssearchItems () /// <summary> /// 2.0 JQuery TypeAeAt-In asynchron sucht Suchwörter und vervollständigt automatisch das Suchbox> //// Bei der Suche sind die Details der Benutzersuche in der Bibliothek enthalten. <Ctrails> JSON </Returns> public actionResult GethotSearchItems () {// 2.1 den aktuellen Suchbegriff "Abfrage" String query = requiry ["query"]; // 2.2 Abfrage die Hot Word -Sammlung dieses Feldes aus der Datenbank -Wörterwörter. Sortieren Sie diese Suchbegriffe aus der Datenbank nach Suchvorgängen und geben Sie die Daten an typeAwhead.jslist <Searchrank> hOTLIST = hOTService.getDatalistby (s => s.Keword.contains (Abfrage), s => S.Searchtimes); if (Hotlist! H.Searchtimes}). Tolist (); ArrayList List2 = new ArrayList (); int i = 1; foreach (var item in list1) {list2.add (string.format ("<a class =/" cat/"href =/"#/"> {0} </a> {1} (} (}), is itel.name.name); JsonRequestBehavior.AllowGet);} else {return json ("", jsonRequestBehavior.AllowGet);}} #endregionLass es uns vorerst tun.