Automatische Vervollständigung mit jQuery-Benutzeroberfläche

Es gibt viele Plugins im Internet, die es uns ermöglichen, diese Funktionalität zu unserer Website hinzuzufügen, jedoch werden sie nach einem Programmierschema entwickelt, das wir möglicherweise nicht kennen, und dann ist ihre Änderung und Implementierung normalerweise etwas mühsam und kompliziert. Aber es ist nicht alles verloren, da jQuery und seine Erweiterung von Bibliotheken jQuery-Benutzeroberfläche sie bringen uns einige Methoden, um die Autocomplete-Funktionalität auf unserer Website ohne große Kopfschmerzen zu implementieren.
Bevor wir ein Beispiel durchgehen, sehen wir uns die Autocomplete-Methode und ihre Funktionsweise an.
Die Methode zur automatischen Vervollständigung ()
Die Methode Autovervollständigung kann auf zwei Arten verwendet werden:

$ (Selektor, Kontext) .autocomplete (Optionen) $ (Selektor, Kontext) .autocomplete ("Aktion", Parameter)

Diese Methode deklariert, dass ein HTML als Feld verwaltet werden muss, das eine Liste von Vorschlägen anzeigt. Die Optionen legen das Verhalten dieser Liste in dem Moment fest, in dem der Benutzer mit der Eingabe in das Feld beginnt.
Von den im Textfeld eingegebenen Zeichen wird ein Vergleich mit den in den Quelloptionen enthaltenen Werten vorgenommen.
Sehen wir uns ein praktisches Beispiel an, um es besser zu sehen:
1- Zuerst binden wir die notwendigen Dateien ein:

2- Wir erstellen eine Variable, die die Wörter enthält, aus denen die Liste der Vorschläge für die automatische Vervollständigung besteht. Die Liste der Vorschläge kann auch von a gespeist werden JSON und sogar von a XML, sogar die Funktionalität durch Hinzufügen von Ajax etwas erweitern, aber in diesem Beispiel verwenden wir eine Variable, um die Dinge nicht zu verkomplizieren:

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", „Groovy“, „Haskell“, „Java“, „JavaScript“, „Lisp“, „Perl“, „PHP“, „Python“, „Ruby“, „Scala“, „Schema“];

3- Wir rufen die Methode auf, ordnen ihr den Selektor zu und geben ihr den Parameter als Option Quelle Hier erfahren Sie, wo Sie die Liste der Vorschläge erhalten:

 $ ("#tags") .autocomplete ({source: availableTags}); 

4- Zum Abschluss in unserem HTML erstellen wir adas enthält unsere Eingabe, die die automatische Vervollständigung implementiert:

Stichworte:

Nach der Implementierung sollte es ungefähr so ​​aussehen:

Schließlich überlasse ich Ihnen den vollständigen Code, damit Sie ihn selbst testen können, ohne zu vergessen, dass wir unsere Liste mit Vorschlägen aus verschiedenen gültigen Quellen füllen und verschiedene Optionen und Ereignisse anwenden können, die die Funktionalität unserer Komponente erhöhen.

 jQuery UI Autocomplete - StandardfunktionalitätStichworte:

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben