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.

<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 value="Two">
  <option value="Three">
</datalist>
<??>

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.

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

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:

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

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:

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"];

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

function mySortFunc(text, input) {
  return text.localeCompare(input); // 修正此處，使用localeCompare進(jìn)行排序
}

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

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:

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"];

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):

<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 value="Two">
  <option value="Three">
</datalist>
<??>

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

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

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

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

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

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"];

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!