Eine schnelle Google-Suche führt zu zahlreichen praktischen Autocomplete-Plugins. Es gibt sogar eine Option, die von der jQuery-Benutzeroberfläche gemeinsam mit der Bibliothek genutzt wird. Heute möchte ich jedoch nach einer alternativen Lösung suchen. Das von DevBridge veröffentlichte jQuery Autocomplete-Plugin bietet genau die Funktionalität, die ich besonders ansprechend finde.
Die Stile markieren automatisch Wörter, während Sie tippen, und die Ergebnisse werden im Dropdown-Menü unten angezeigt. Dieses Tutorial enthält eine kurze Einführung in die Verwendung des Plugins durch Laden von Inhalten aus einem JavaScript-Array. Es ist möglich, Ajax-Inhalte aus einer Backend-Datei oder aus Inhalten aus der Datenbank zu laden. In diesem Lernprogramm ist es jedoch einfacher, mit lokalen Daten zu arbeiten. Schauen Sie sich meine Beispieldemo an, um eine Vorstellung davon zu bekommen, was wir zu bauen versuchen.
Live Demo - Quellcode herunterladen
Die Seite erstellen
Ein guter erster Schritt ist das Herunterladen einer Kopie des jQuery Autocomplete-Plugins. Ich verwende die minimierte Version in meinem Header zusammen mit einer Kopie des neuesten jQuery-Skripts. Da ich alle Vorschläge in einem JavaScript-Array aufbewahre, habe ich auch die benutzerdefinierten Skripts in eine andere separate Datei verschoben.
Die Ressourcen sind nicht zu schwer, um sich einzurichten. Und in ähnlicher Weise ist der gesamte HTML-Code sehr unkompliziert, sodass Sie jede Art von Suchdesign auf Ihrer Seite implementieren können. Ich verwende einen äußeren Container mit der ID #Suchfeld die ganze Form zentrieren. Für diese Demonstration gibt es keine Schaltfläche zum Senden. Die Ergebnisse werden jedoch automatisch im dynamischen Kontextfeld unter der Eingabe angezeigt.
Wir können das Feld mit einer ID von anvisieren #autocomplete. Es gibt keinen zusätzlichen HTML-Code, da alle Vorschläge mit JS-Codes dargestellt werden. Ein weiterer interessanter Bereich ist der Absatz mit einer ID von #outputcontent. Hier können wir die Auswahl des Benutzers anzeigen, sobald er auf einen Vorschlag klickt. Normalerweise leiten Sie auf einer Live-Website den Benutzer stattdessen einfach zu einer Suchseite oder zur Hauptseite selbst um.
Mit CSS gestalten
Ich möchte nicht zu sehr ins Detail gehen, aber wir sollten uns die CSS-Stile für jedes der vorgeschlagenen Features sowie den Haupteingabebereich ansehen. Der Rahmen und die Inhaltsstile des äußeren Rahmens werden stark um die Design Shack-Suchleiste herum entwickelt. Jeder der Vorschlagsstile basiert auf dem Standardcode, den ich in mein Stylesheet kopiert habe.
Wenn Sie diese in einem separaten Stylesheet behalten möchten, wird es trotzdem geladen. Ich versuche jedoch, Ressourcen so zu kombinieren, dass wir HTTP-Anforderungen vom Browser einschränken können. Die ersten beiden Klassen zielen auf das gesamte Popup für Vorschläge sowie auf jede interne Vorschlagszeile. Sie können sie auf jede Weise gestalten, die zu Ihrer Website passt. Zusätzlich enthält das CSS eine ausgewählte Feature-Class, um bereits vom Benutzer eingegebenen Text hervorzuheben.
Das Suchfeld selbst sollte unabhängig von Ihrem eigenen Design kein Problem sein. Mit jQuery Autocomplete können Sie jede Breite bearbeiten, sodass alle Vorschläge gut in dasselbe Layout passen. Zugegeben, mein Beispiel nimmt viel Platz auf der Seite in Anspruch, aber das Plugin kann dies ohne viele Anpassungen einwandfrei erledigen.
Implementieren Sie die Autovervollständigung
Wenn Sie einen Ajax-Backend-Aufruf zum Abrufen von Datenergebnissen verwenden, müssen Sie möglicherweise eine eigene Suchfunktion ausführen. jQuery Autocomplete erwartet eine Art von Antwortdaten wie XML / JSON, und diese sollten von PHP, Rails, Python, ASP.NET usw. zurückgegeben werden. Das wahrscheinlichste Szenario ist das Durchsuchen Ihrer Datenbanktabelle mit Einträgen und das Herausnehmen aller zugehörigen Daten Posts und ihre URLs, dann geben Sie diese Liste an Ihren Browser zurück.
Was ich getan habe, ist eine Reihe von Einträgen direkt in JavaScript für die wichtigsten Währungen, die auf der ganzen Welt zu finden sind. Wenn Sie den Namen des Landes oder der Währung eingeben, wird eine Liste der vorgeschlagenen Elemente angezeigt, die direkt aus dem Array gezogen werden. Die manuelle Dateneingabe dauert sehr lange. Ich werde nur einen kleinen Teil des Arrays kopieren, um zu zeigen, wie dies geschieht.
Der gesamte Inhalt muss hinzugefügt werden, bevor Sie in jQuery eine eigene Funktion ausführen. Ich habe beschlossen, das Array und den benutzerdefinierten Funktionsaufruf in derselben JS-Datei zu speichern. Sie können jedoch Funktionen von Daten trennen und sie in verschiedene Dateien verschieben. Nun benötigt das Autocomplete-Plugin nur eine kleine Menge Standardcode.Ich werde eine Beispielvorlage zusammen mit meinem Live-Demo-Code kopieren, damit Sie sehen können, was ich mit denselben Parametern gemacht habe.
Das Sieh nach oben Parameter wird nur für lokale Daten verwendet, wenn wir ein Array als Ziel verwenden. onSelect löst jedes Mal eine neue Funktion aus, wenn der Benutzer einen Vorschlag auswählt. In meiner Live-Demo erstellen wir einfach eine neue HTML-Zeichenfolge, um den ausgewählten Namen und Wert dieses Eintrags auszugeben. Bitte beachten Sie jedoch, dass meine Demo ein sehr nacktes Beispiel dafür ist, was möglich ist.
In der jQuery Autocomplete-Dokumentation finden Sie weitere Parameter. Ich habe noch nicht einmal angefangen, an der Oberfläche zu kratzen, und JavaScript-Entwickler können wahrscheinlich mit vielen anderen Parametern im Funktionsaufruf Beispiele zusammenstellen. Ich möchte jedoch zeigen, wie einfach es ist, dieses Plugin auf Ihrer Website zum Laufen zu bringen - auch wenn nötig statische Daten verwendet werden.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Wenn Sie noch nie mit Autocomplete-Vorschlägen gespielt haben, muss ich dieses Plugin empfehlen. Ich habe in der Vergangenheit einige unterschiedliche Lösungen verwendet, aber bis jetzt ist mir nichts wirklich aufgefallen. Und es gibt einen großen Unterschied zwischen dem Laden von Vorschlägen mit Seitenergebnissen und Suchergebnissen (wie Google Instant).
Stellen Sie vor der Verwendung dieses Plugins sicher, dass Sie einen guten Plan für die Erstellung einer gut funktionierenden Benutzeroberfläche haben. Das jQuery Autocomplete-Plugin und alle meine Quellcodes werden kostenlos unter der MIT-Lizenz veröffentlicht. Sie können dieses Plugin also für jedes Projekt verwenden!