So verwenden Sie das Widget für die automatische Vervollständigung der jQuery-Benutzeroberfläche

In diesem Tutorial betrachten wir eine der neuesten Komponenten von jQuery UI 1.8 - das Widget Autocomplete. Das Ausfüllen von Textfeldern kann bei Besuchern Ihrer Website eine beliebte Wahl sein, da sie die Eingabe von Informationen erheblich vereinfacht. Sie können beispielsweise für Produktsuchfelder verwendet werden, oder wenn ein Besucher ein Land, eine Stadt oder etwas anderes eingeben muss, das aus einem allgemeinen Datensatz ausgewählt werden kann. Die jQuery UI Autocomplete ist nicht nur bei Besuchern beliebt, sondern auch bei Entwicklern beliebt, da sie einfach zu bedienen, leistungsstark und flexibel ist.

Ich bin kein großer Fan von Facebook, ich bevorzuge Twitter (@danwellman btw), aber eine Facebook-Funktion, die ich mag, ist die Messaging-Funktion, mit der Sie eine Nachricht an einen Freund oder an Freunde senden können. Ich mag es, wie die Autovervollständigung verwendet wird, um die Auswahl der Namen Ihres Freundes zu vereinfachen, und wie die Namen formatiert werden, sobald sie ausgewählt und dem 'to'-Feld hinzugefügt wurden, z. Sie haben jeweils einen engen Link, sodass der Name leicht entfernt werden kann, ohne dass Text ausgewählt werden muss.

In diesem Lernprogramm verwenden wir das Widget für die automatische Vervollständigung der Benutzeroberfläche der jQuery-Benutzeroberfläche, um diesen Aspekt des Messaging-Systems von Facebook zu replizieren. Wir werden uns jedoch nicht mit dem Senden von Nachrichten befassen. Das ist, was wir schaffen werden:


Schritt 1 Erste Schritte

Wir müssen einen benutzerdefinierten Download der jQuery-Benutzeroberfläche erstellen, der nur die benötigten Komponenten enthält. Besuchen Sie den Download Builder unter http://jqueryui.com/download. Wir müssen die folgenden Kernkomponenten verwenden:

  • Ader
  • Widget
  • Position

Das Autocomplete-Widget selbst wird ebenfalls benötigt. Stellen Sie daher sicher, dass nur die obigen Elemente sowie Autocomplete im linken Bereich Komponenten markiert sind. Verwenden Sie das Standarddesign (UI Lightness) und stellen Sie sicher, dass die Version 1.8 rechts ausgewählt ist.

Erstellen Sie nach dem Herunterladen einen neuen Ordner auf Ihrem Computer und rufen Sie ihn an Autovervollständigung. Dann öffnen Sie das Archiv und kopieren das css und js Ordner in den neuen Ordner, den Sie gerade erstellt haben. Dadurch erhalten Sie alle Bibliotheksdateien, die für dieses Beispiel erforderlich sind, einschließlich jQuery selbst. Diese müssen nicht separat heruntergeladen werden.


Schritt 2 Das zugrunde liegende HTML

Schauen wir uns den HTML-Code für die

Zuerst:

Neues Nachrichtenformular Neue Nachricht

Es ist eine ziemlich Standardform; Es gibt einen äußeren Behälter

wir können für das styling und das verwenden dass der Autocomplete angehängt wird, befindet sich ebenfalls in einem
Element; wir werden das gestalten so dass es etwas versteckt ist, und wir werden die
so dass es aussieht wie die anderen Felder im Formular. Wir geben den Behälter für die das ui-helper-clearfix Klassenname, um diese Dienstprogrammklasse aus dem CSS-Framework der jQuery-Benutzeroberfläche zu verwenden.

Wir müssen außerdem einen Link zu den Dateien erstellen, die wir aus dem jQuery-UI-Archiv entpackt haben, sowie ein benutzerdefiniertes Stylesheet. Die folgenden Dateien sollten in die der Seite:

 

Die folgenden Dateien sollten am Ende von :

 

Schritt 3 Formular gestalten

In diesem Beispiel verwenden wir ein sehr einfaches, neutrales Thema, von dem die meisten nur als Beispiel dienen. Es werden nur sehr wenige Stile benötigt, die meisten können bei Bedarf geändert werden. Das folgende CSS wird im verwendet autocomplete.css Stylesheet (das gesamte Design der jQuery-Benutzeroberfläche befindet sich im jquery-ui-1.8.custom.css Stilvorlage):

#formWrap padding: 10px; Position: absolut; Schwimmer: links; Hintergrundfarbe: # 000; Hintergrund: rgba (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px;  #messageForm width: 326px; Grenze: 1px fest # 666; Hintergrundfarbe: #eee;  #messageForm fieldset padding: 0; Marge: 0; Position: relativ; Grenze: keine; Hintergrundfarbe: #eee;  #messageForm Legende Sichtbarkeit: ausgeblendet; Höhe: 0;  #messageForm span display: block; Breite: 326px; Polsterung: 10px 0; Marge: 0 0 20px; Text-Gedankenstrich: 20px; Hintergrundfarbe: #bbb; Rand unten: 1px fest # 333; Schriftart: 18px Georgia, Serif; Farbe: #fff;  #friends width: 274px; Polsterung: 3px 3px 0; Marge: 0 auto; Grenze: 1px fest #aaa; Hintergrundfarbe: #fff; Cursor: Text;  #messageForm #to width: 30px; Marge: 0 0 2px 0; Polsterung: 0 0 3px; Position: relativ; oben: 0; Schwimmer: links; Grenze: keine;  #messageForm eingabe, #messageForm textarea display: block; Breite: 274px; Polsterung: 3px; Marge: 0 Auto 20px; Grenze: 1px fest #aaa;  #messageForm label Anzeige: Block; Marge: 20px 0 3px; Text-Gedankenstrich: 22px; Schriftart: Fett 11px Verdana, Serifenlose; Farbe: # 666;  #messageForm #toLabel margin-top: 0;  #messageForm button float: right; Marge: 0 0 20px 0;  #messageForm #cancel margin-right: 20px;  #friends span display: block; Marge: 0 3px 3px 0; Polsterung: 3px 20px 4px 8px; Position: relativ; Schwimmer: links; Hintergrundfarbe: #eee; Grenze: 1px fest # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; Grenzradius: 7px; Farbe: # 333; Schrift: normal 11px Verdana, serifenlos;  #friends umfassen eine Position: absolut; rechts: 8px; oben: 2px; Farbe: # 666; Schrift: fett 12px Verdana, serifenlos; Textdekoration: keine;  #friends umfassen a: hover color: # ff0000;  .ui-menu .ui-menu-item Leerraum: Nowrap; Auffüllen: 0 10px 0 0; 

Um dem Formular einen schönen transparenten Rand mit abgerundeten Ecken zu geben, verwenden wir das CSS3 RGBa Regel und die -Moz-Rand-Radius, -Webkit-Grenzradius und Grenzradius Regeln; Die meisten gängigen Browser unterstützen diese Regeln jetzt, einschließlich Firefox, Safari, Chrome und Opera. Der IE unterstützt keine der beiden Möglichkeiten. Obwohl er einen Filter zum Implementieren von rudimentärer Deckkraft verwenden kann, müssen abgerundete Ecken durch die Verwendung von Bildern unterstützt werden. Die Wirksamkeit der RGBa Transparenz wird in diesem Beispiel nicht in vollem Umfang gezeigt. Diese Art von Formular würde jedoch wahrscheinlich als schwebende modale Überlagerung in einer vollständigen Implementierung verwendet, die über dem tatsächlichen Inhalt der Seite liegt.

Der Kontainer

um die Feld, an das das Textfeld Autocomplete angehängt wird, erhält dieselbe Positionierung und denselben Stil wie das Elemente, aber die In diesem Container wurde der Rand entfernt, sodass er ausgeblendet ist. Wir reduzieren auch seine Breite und schwenken es nach links. Dies ist so, wenn Sie die formatierten Empfänger zu der hinzufügen
das wird nicht überlaufen und die Höhe des vergrößern
unnötigerweise.

Wir gestalten auch die Empfänger, die dem hinzugefügt werden

wie Elemente, die einen Link enthalten. Meist sind diese dem Grundmotiv angepasst und mit abgerundeten Ecken versehen. Es ist wichtig, dass diese Elemente auf Blockebene erstellt werden und auch schweben, damit sie sich korrekt stapeln. Wir müssen auch einige der von der verwendeten jQuery-Benutzeroberfläche angebotenen Automcomplete-Einstellungen überschreiben. Die letzte Auswahl verhindert einfach, dass die einzelnen Vorschläge im Menü zwischen den Wörtern wechseln, was geschieht, weil wir das gemacht haben es ist mit so klein verbunden.

Zu diesem Zeitpunkt sollte das Formular folgendermaßen aussehen:


Schritt 4 Anbringen der Autovervollständigung

Als nächstes müssen wir das Autocomplete-Widget an das anhängen innerhalb des

; Dazu können wir das folgende Skript verwenden:

Das Widget ist an das angehängt Verwendung der Autovervollständigung () Methode. Wir liefern ein Objektliteral als Argument für die Methode, die das konfiguriert Quelle Option und die wählen und Veränderung Ereignisrückrufe.

Das Quelle Mit dieser Option können Sie dem Widget mitteilen, woher die Vorschläge für das Autovervollständigen-Menü stammen. Wir verwenden eine Funktion als Wert dieser Option, die zwei Argumente akzeptiert. der erste ist der Begriff, der in das eingegeben wurde , Die zweite ist eine Rückruffunktion, mit der die Vorschläge an das Widget zurückgegeben werden.

In dieser Funktion verwenden wir jQuery's getJSON () Methode, um den Begriff an eine serverseitige PHP-Datei zu übergeben. Die PHP-Datei verwendet den Begriff, um übereinstimmende Kontaktnamen aus einer MySql-Datenbank zu extrahieren. Wir verwenden einen JSONP-Callback, um die vom Server zurückgegebenen Daten zu verarbeiten. Die Rückruffunktion, die als zweites Argument an die source -Option übergeben wird, erwartet, dass sie die Daten in einem Array empfängt. Daher erstellen wir zuerst ein leeres Array und verwenden dann die von jQuery jeder() Methode zum Verarbeiten jedes Elements in dem vom Server zurückgegebenen JSON-Array. Wir durchlaufen einfach jedes Element in diesem Array und fügen jeden Vorschlag unserem neuen Array hinzu. Sobald unser neues Array erstellt ist, übergeben wir es an die Rückruffunktion, damit das Widget im Menü angezeigt wird.

Dann definieren wir einen Handler für den Benutzerdefinierten Autocomplete wählen Veranstaltung; Diese Funktion wird vom Widget jedes Mal ausgeführt, wenn im Menü Autocomplete ein Vorschlag ausgewählt wird. Dieser Funktion werden automatisch zwei Argumente übergeben - das Ereignisobjekt und ein ui Objekt, das den ausgewählten Vorschlag enthält. Wir verwenden diese Funktion, um den Namen des Empfängers zu formatieren und ihn dem hinzuzufügen

. Wir erstellen einfach eine Element für den Text und ein Ankerelement, mit dem der Empfänger entfernt werden kann. Nachdem der formatierte Empfänger erstellt wurde, fügen wir ihn direkt vor dem getarnten Empfänger ein .

Zuletzt fügen wir einen Handler für die Veränderung Veranstaltung; Diese Funktion wird immer aufgerufen, wenn der Wert von dass der Autocomplete mit Änderungen verbunden ist. Wir verwenden es einfach, um den Wert aus dem zu entfernen weil wir die formatierte Version bereits in unseren Container aufgenommen haben

. Das Karat sieht etwas höher aus, sobald ein formatierter Kontaktname zu dem hinzugefügt wurde
Daher verwenden wir diesen Event-Handler, um dies zu korrigieren.

Dies ist die gesamte Konfiguration, die wir für diese bestimmte Implementierung benötigen, aber es gibt noch ein paar zusätzliche Funktionen, die wir hinzufügen müssen, um die Dinge ein wenig zu verbessern. Nach dem Autovervollständigung () Methode füge folgenden Code hinzu:

// Click-Handler zu Freunden hinzufügen div $ ("# friends"). click (function () // focus 'to' Feld $ ("# to"). focus ();); // Live-Handler für Klicks auf entfernte Links hinzufügen $ (". remove", document.getElementById ("friends")). live ("click", function () // aktuellen Freund entfernen $ (this) .parent () .remove (); // korrigiere die Position des Feldes "to" if ($ ("# friends span"). length === 0) $ ("# to"). css ("top", 0); );

Das dass unser Autocomplete angeschlossen ist, ist teilweise verborgen und sein Container

ist so gestaltet, dass es wie die anderen Felder im Formular angezeigt wird; Um die Täuschung abzuschließen, fügen wir dem Container einen Click-Handler hinzu
so dass das Klicken auf eine beliebige Stelle das eigentliche fokussiert . Optisch und funktional jetzt das
sollte von einem regulären Bereich nicht zu unterscheiden sein.

Wir müssen auch Klicks auf den Anker bearbeiten, der jedem formatierten Empfänger hinzugefügt wird. Wir verwenden jQuery's Leben() Diese Methode kann zu einem bestimmten Zeitpunkt auf der Seite vorhanden sein oder nicht, und es ist einfacher, die Handlerfunktion jedes Mal zu binden, wenn wir einen dieser Anker erstellen. Immer wenn einer dieser Anker angeklickt wird, navigieren wir zum übergeordneten Anker des Ankers, auf den geklickt wurde, und entfernen ihn dann von der Seite. Erinnern Sie sich noch daran, als wir die Position des Karat zuvor im Skript korrigiert haben? Wir müssen nur prüfen, ob alle Empfänger entfernt wurden, und falls ja, setzen Sie die Position auf die Standardeinstellung zurück.


Schritt 5 Zusätzlicher Code und Ressourcen

Ich habe eine MySql - Datenbank mit einer Tabelle mit den Empfängernamen und der folgenden PHP - Datei verwendet, um die vom getJSON () Methode und ziehen Sie passende Empfänger aus der Datenbank:

 $ row ["name"]);  // Echo JSON auf Seite $ response = $ _GET ["Rückruf"]. "(". json_encode ($ friends). ")"; Echo $ Antwort; mysql_close ($ server); ?>

Um die herunterladbaren Beispieldateien ausführen zu können, benötigen Sie einen Entwicklungs-Webserver, auf dem PHP installiert und konfiguriert ist, sowie MySql und die entsprechende Datenbank und Tabelle. Wenn ein Buchstabe in das Feld "to" eingegeben wird, wird dieser Brief an den Server übergeben und zum Herausnehmen jedes Namens verwendet, der mit dem eingegebenen Buchstaben beginnt. Die übereinstimmenden Namen werden dann als JSON an die Seite zurückgegeben und im Vorschlagsmenü angezeigt:

In diesem Lernprogramm wurde gezeigt, wie Sie das Nachrichtenformular von Facebook replizieren können, insbesondere die Art und Weise, wie Freunde mithilfe von Autocomplete als Empfänger hinzugefügt werden, und wie die Freundesnamen nach dem Hinzufügen formatiert werden, damit sie problemlos entfernt werden können. Unser Beispielformular macht eigentlich nichts, aber um das Formular wirklich zu senden, müssten wir den Inhalt des Formulars an eine serverseitige Datei senden, um es mit AJAX zu senden, das leicht in das Submit eingebunden werden kann Ereignis der im Formular verwendeten Senden-Schaltfläche.

Die Empfänger müssten natürlich eine Bedeutung für das Backend-System haben und würden wahrscheinlich E-Mail-Adressen in der Datenbank zugeordnet werden. Wir müssten den textuellen Inhalt von jedem abrufen Elemente vor der Weitergabe an den Server, obwohl dies eine ziemlich triviale Angelegenheit wäre.

Mit dem Widget für die automatische Vervollständigung der jQuery-Benutzeroberfläche können Sie problemlos eine Verbindung zu einer beliebigen Datenquelle herstellen. Es enthält eine Vielzahl von Ereignisbehandlungsroutinen, an die wir Funktionen übergeben können, um auf das Eingeben von Text in das zugehörige Feld oder auf einen im Menü ausgewählten Vorschlag zu reagieren. Das Widget wurde mit dem umfangreichen CSS-Framework der jQuery-Benutzeroberfläche gestaltet und kann leicht so geändert werden, dass es Ihrem vorhandenen Websitedesign entspricht. Alles in allem ist es ein hervorragendes Widget, das einfach zu bedienen ist und großartige Funktionen bietet.