Erstellen eines JavaScript -Autoperete -Widgets mit Awesomplete

automatisch in der Web -App prognostiziert der Rest eines Wortes oder Satzes, wenn der Benutzer eingeht. Benutzer drücken normalerweise die Registerkarte Taste, um Vorschläge zu akzeptieren, oder drücken Sie die Down -Pfeil -Taste, um einen von mehreren Vorschlägen zu akzeptieren.

In diesem Tutorial wird erläutert, wie die Awesplete JavaScript -Bibliothek verwendet wird, um automatische Komponenten auf Ihrer Website zu erstellen. Awesomplete wurde von Lea Verou, einem bekannten Redner, Schriftsteller und Spezialisten in der W3C CSS-Arbeitsgruppe, gegründet.

Schlüsselpunkte

• Awesomplete ist eine leichte, anpassbare JavaScript -Bibliothek, die von Lea Verou für die automatische Vervollständigungsfunktion in Webanwendungen entwickelt wurde. Es hat keine Abhängigkeiten und ist mit allen modernen Browsern kompatibel.
• Um Awesomplete zu verwenden, müssen Sie zwei Dateien in die Webseite einbeziehen: Awesomplete.css und Awesplete.js. Die grundlegende Komponente benötigt ein Eingabeelement mit der Klasse "Awesomplete" sowie relevante Optionen im Datalistenelement.
• Awesomplete bietet eine Vielzahl von Eigenschaften, einschließlich Filter, Sortier, Element und Ersatz, mit denen automatische Komponenten angepasst werden können. Diese Eigenschaften steuern, wie Einträge übereinstimmen, wie Listenelemente sortiert werden, wie Listenelemente generiert werden und wie Benutzerauswahlen die Benutzereingabe ersetzen.
• Die Bibliothek bietet mehrere Möglichkeiten, ihr Verhalten weiter anzupassen, sowie fünf benutzerdefinierte Ereignisse, mit denen auf verschiedene Benutzerinteraktionen reagiert werden können. Es kann auch mit dynamischen Daten und Remotedatenquellen verwendet werden, wodurch es zu einem vielseitigen Tool zur Verbesserung der Benutzererfahrung der Website wird.

Warum nicht HTML5 -Datalist -Elemente verwenden?

Das HTML5 -Datalist -Element ist wahrscheinlich der einfachste Weg, um die Website automatisch zu implementieren. Leider hat dieses Element eine begrenzte Browserunterstützung und seine Implementierung ist inkonsistent (z. B. nur Chrome übereinstimmt von Anfang an, Firefox überall). Es ist auch unmöglich, es basierend auf dem Design Ihrer Website zu stylen, und obwohl dies vielversprechend ist, ist dies möglicherweise noch nicht die richtige Wahl.

Awesomplete hingegen ist eine ultra-lichtgewichtige, anpassbare automatische Komponente, die Sie in die Seite einfügen können. Es hat keine Abhängigkeiten (keine JQuery), es läuft auf allen modernen Browsern und kann nach dem Thema Ihrer Website gestylt werden.

worauf warten wir noch? Fangen wir an!

in Ihrer Seite Awesomplete

einbeziehen

Um die Awesplete -Bibliothek zu verwenden, benötigen wir zwei Dateien: Awesplete.css und Awesplete.js.

Sie können Bower verwenden, um diese Dateien zu erhalten:

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

kann auch direkt von der Awespromit -Website heruntergeladen werden.

oder schließen Sie sie an, indem Sie den Rawgit-CDN (der die Originaldateien direkt von GitHub mit dem korrekten Header vom Typ Inhalt dient) einbezogen. Wie unten gezeigt.

Um die grundlegende Komponente zu instanziieren, benötigen Sie ein Eingabeelement mit Class Awesomplete sowie relevante Optionen im Datalist -Element. Das Listenattribut des Eingabeelements muss mit der ID des Datalist -Elements übereinstimmen. Dies ist eine angemessene Standardkonfiguration, da sie eine Fallback -Lösung für jeden Benutzer bietet, der JavaScript deaktiviert.

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

Grundfunktionen

Es gibt viele Möglichkeiten, diese Multifunktionsbibliothek zu verwenden. Beginnen wir mit einem grundlegenden Anwendungsfall.

Verwenden Sie das Datenlistenattribut

Die Optionen im obigen Datalistenelement können auf das Datenlistenattribut des Eingabeelements selbst verschoben werden.

<code class="language-html"><link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
<input class="awesomplete" list="mylist">
<datalist id="mylist">
  <option value="One">
  </option>
<option value="Two">
  </option>
<option value="Three">
</option></datalist>
</code>

JavaScript

Die obige Lösung ist sehr nützlich, wenn Ihre automatische Option statisch ist. Um jedoch dynamisch eine Liste zu erstellen und das Verhalten der automatischen Komponente weiter anzupassen, benötigen wir eine JavaScript -Methode.

<code class="language-html"><input class="awesomplete" data-minchars="1" data-maxitems="5" data-list="China, India, Japan, Russia, UK, USA"></code>

Hier erstellen wir ein Awesomplete -Objekt und übergeben es zwei Parameter: eine Referenz auf das Eingabeelement und ein Objektliteral, das die Konfigurationsoptionen enthält.

Wir weisen dann die Liste der Listeneigenschaft des Awesompleten -Objekts einem Array zu, das eine Liste der automatischen Optionen zur Vervollständigung enthält. In der folgenden Demo habe ich das Ländername -Array mit diesem praktischen Code -Snippet erweitert.

Beachten Sie auch, dass die Minchars, Maxitems und autofirst-Eigenschaften in der vorherigen Demonstration mit den Datenminen, Datenmaxitems und Daten-Autifirst-Eigenschaften übereinstimmen.

Wenn automatische Komponenten mit JavaScript instanziiert, haben wir Zugriff auf viele andere Eigenschaften, APIs und Ereignisse. Mal sehen, was sie sind und wie man sie benutzt?

erweiterte JavaScript -Eigenschaften

Awesplete -Objekt unterstützt vier weitere Eigenschaften. Sie sind: Filter, Sortieren, Element und Ersetzen. Alle vier Attribute werden Funktionen zugewiesen.

Filterattribut steuert, wie Einträge übereinstimmen. Die Rückruffunktion nimmt zwei Parameter vor: der aktuelle Vorschlagstext (also in unserem Beispiel, jeder Wert in "China", "Indien", "Japan", "Russland", "Großbritannien", "USA" wiederum) und Saiten, die Benutzer enthalten Eingang. Standardmäßig können Eingänge überall in der Zeichenfolge übereinstimmen und sind unempfindlich.

Das folgende Beispiel zeigt, wie Awesomplete Case-sensitive Matching durchführen:

<code class="language-javascript">var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

sortieren Sie das Attribut steuert, wie Listenelemente sortiert werden. Die Rückruffunktion hat den gleichen Prototyp wie die Funktion array.prototype.sort ().

Hier finden Sie, wie Sie es verwenden, um Übereinstimmungen in umgekehrter alphabetischer Reihenfolge zu sortieren:

<code class="language-javascript">function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

Element Attribut steuert, wie Sie Listenelemente generieren. Diese Rückruffunktion hat auch zwei Parameter: derzeit empfohlene Text- und Benutzereingaben. Es sollte ein Listenelement zurückgeben. Hier erfahren

<code class="language-javascript">function mySortFunc(text, input) {
  return text.localeCompare(input); // 修正此处，使用localeCompare进行排序
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  sort: mySortFunc
});
awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];</code>

Das vierte und letzte Attribut ist das Ersatzattribut. Das Attribut ersetzen steuert, wie der Benutzer die Benutzereingabe ersetzen möchte. Im Vergleich zu den vorherigen drei Funktionen akzeptiert diese Rückruffunktion einen Parameter: den Text der ausgewählten Option. Wenn der Benutzer eine der vorgeschlagenen Optionen auswählt (z. B. durch Klicken), wird er ausgelöst.

Hier finden Sie, wie Sie die Benutzerauswahl in Großbuchstaben konvertieren:

<code class="language-javascript">function myItemFunc(text, input){
  return Awesomplete.$.create("li", {
    innerHTML: text.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"),
    "aria-selected": "false"
  });
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  item: myItemFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

Integrieren Sie alle Inhalte

Dies ist eine Demonstration, die zeigt, wie Filter- und Elementfunktionen kombiniert werden und nur Vorschläge machen, nachdem der Benutzer das angegebene Zeichen eingetreten ist (in diesem Fall ein Komma, gefolgt von einem Raum):

tiefer graben - Events, APIs und Ajax

Diese Bibliothek löst fünf benutzerdefinierte Ereignisse aus. Dies sind: Awecomplete-Select, Awecomplete-SelectComplete, Awecomplete-Open, Awecomplete-Close und Awecomplete-Highlight.

Hier finden Sie eine Verbindung zu jedem dieser Ereignisse:

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

Awesomplete bietet verschiedene Methoden auf dem Awesompleten -Objekt, mit denen Sie sein Verhalten anpassen können:

1. open (): Wird zum Öffnen von Popup-Fenster verwendet.
2. close (): Wird verwendet, um das Popup-Fenster zu schließen.
3. Weiter (): Wird verwendet, um den nächsten Artikel im Popup hervorzuheben.
4. vorher (): Wird verwendet, um das vorherige Element im Popup-Fenster hervorzuheben.
5. Goto (i): Wird verwendet, um Elemente mit Index I im Popup-Fenster hervorzuheben (-1 bedeutet, alle Elemente zu deaktivieren).
6. select (): Wird verwendet, um das aktuell hervorgehobene Element auszuwählen, den Wert des Textfelds durchzuführen und das Popup-Fenster zu schließen.
7. evaluate (): Wird verwendet, um den aktuellen Zustand der Komponente zu bewerten und die Vorschlagsliste zu regenerieren. Wenn keine Vorschläge verfügbar sind, schließen Sie das Popup. Diese Methode ist besonders nützlich, wenn die Listeneigenschaft dynamisch festgelegt wird, wenn das Popup-Fenster geöffnet ist.

Hinweis: Open () öffnet die Liste derzeit nicht, bevor das Eingabeereignis ausgelöst wird, aber es gibt eine Pull -Anfrage auf der Projekt -Homepage, die dieses Problem lösen sollte.

enden

als letztes Beispiel: Verwenden Sie Awesomplete mit Daten, die von der Remote -API über AJAX abgerufen werden. Ich werde die API der Restländer hier verwenden, die den Benutzern viele Länderdaten zur Verfügung stellt.

Initialisieren Sie zuerst die Komponente, ohne die Listeneigenschaft festzulegen (ich verwende JQuery hier für die Kürze):

<code class="language-html"><link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
<input class="awesomplete" list="mylist">
<datalist id="mylist">
  <option value="One">
  </option>
<option value="Two">
  </option>
<option value="Three">
</option></datalist>
</code>

Fügen Sie dann einen KeyUp -Ereignis -Listener an:

<code class="language-html"><input class="awesomplete" data-minchars="1" data-maxitems="5" data-list="China, India, Japan, Russia, UK, USA"></code>

Wenn der Benutzer die Taste drückt, müssen wir den Wert des Eingabeelements erhalten und eine Anforderung stellen:

<code class="language-javascript">var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

Im Erfolgsruf können wir die JSON -Antwort durchqueren, die Namen jeder Stadt abrufen und das Listenattribut des Awesplete -Objekts dynamisch festlegen:

<code class="language-javascript">function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

Das ist es!

Schlussfolgerung

In diesem Tutorial haben wir gesehen, wie man einfach automatische Komponenten mithilfe der leichten und anpassbaren Awesplete -Bibliothek in Ihrem Projekt implementieren kann. Das Projekt steht noch in aktiver Wartung und ich ermutige Sie, es zu überprüfen.

FAQ über JavaScript AutoComplete -Komponenten - FAQ

von Awesplete

Wie installiere und verwende ich Awesomplete in meinem Projekt?

Um Awesomplete zu installieren, können Sie NPM verwenden oder direkt über das GitHub -Repository herunterladen. Nach der Installation fügen Sie die Dateien von Awesomplete.css und Awesomplete.js in Ihre HTML -Datei ein. Um Awesomplete zu verwenden, erstellen Sie ein Eingangselement in Ihrem HTML und initialisieren Sie Awesomplete mit neuer Awesplete (Eingabe). Sie können dann die Liste mit dem Vorschlag -Array füllen.

Kann ich das Erscheinungsbild des Dropdown-Menüs Awesomplete anpassen?

Ja, Sie können das Erscheinungsbild des Dropdown-Menüs von Awesompleten anpassen, indem Sie die CSS-Klasse in der Datei awesomplete.css überschreiben. Sie können Farben, Schriftarten und andere Stile ändern, um dem Design Ihrer Website zu entsprechen.

Wie kann ich Awesomplete mit dynamischen Daten verwenden?

Awesomplete kann mit dynamischen Daten mithilfe der List -Eigenschaft verwendet werden. Sie können die List-Eigenschaft auf das Vorschlag-Array einstellen, mit dem das Dropdown-Menü automatisch aktualisiert wird, wenn sich das Array ändert.

Kann ich Awesomplete mit einer Remote -Datenquelle verwenden?

Ja, Sie können Awesomplete mit Remote -Datenquellen mithilfe der AJAX -Funktion verwenden. Die AJAX -Funktion akzeptiert eine URL und eine Rückruffunktion, die Daten aus der URL entnimmt und an die Rückruffunktion weitergibt.

Wie gehe ich mit Auswahlereignissen in Awesomplete um?

Sie können das Ereignis "Awesomplete-Select" verwenden, um das Auswahlereignis in Aweesomplete zu verarbeiten. Dieses Ereignis wird ausgelöst, wenn der Vorschlag ausgewählt ist und Sie einen Ereignishörer hinzufügen können, um ihn zu verarbeiten.

Kann ich Awesomplete mit mehreren Eingangsfeldern verwenden?

Ja, Sie können Awesomplete mit mehreren Eingangsfeldern verwenden. Für jedes Eingabefeld müssen Sie nur eine neue Awesomplete -Instanz erstellen.

Wie filtern Sie Vorschläge in Awesomplete?

Sie können die Filterfunktion verwenden, um Vorschläge in Awesomplete zu filtern. Die Filterfunktion akzeptiert einen Vorschlag und einen Eingangswert und gibt true zurück, wenn der Vorschlag mit dem Eingangswert übereinstimmt.

Kann ich Awesomplete mit anderen JavaScript -Bibliotheken verwenden?

Ja, Sie können Awesomplete mit anderen JavaScript -Bibliotheken verwenden. Awesomplete ist eine eigenständige Bibliothek, so dass sie keine Abhängigkeiten hat und nicht mit anderen Bibliotheken in Konflikt steht.

Wie sortieren Sie die Vorschläge in Awesomplete?

Sie können die Sortierfunktion verwenden, um die Vorschläge in Awesomplete zu sortieren. Die Sortierfunktion akzeptiert zwei Vorschläge und gibt negative, null oder positive Zahlen in der Reihenfolge der Vorschläge zurück.

Kann ich Awesomplete in meinem Formular verwenden?

Ja, Sie können Awesomplete in Ihrem Formular verwenden. Nach Auswahl eines Vorschlags wird der Wert des Eingabefeldes auf den Vorschlag gesetzt, sodass er mit dem Formular eingereicht werden kann.

Diese überarbeitete Ausgabe befasst sich mit den angesprochenen Problemen und bietet eine umfassendere und genauere Erklärung für die Funktionalität von Awesplete.

Das obige ist der detaillierte Inhalt vonErstellen eines JavaScript -Autoperete -Widgets mit Awesomplete. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!