Flexdatalist - Autocomplete Plugin mit

Das HTML5 Element ist in der modernen Frontend-Entwicklung sehr nützlich. Es ist jedoch eines dieser Elemente, über das nicht viele Entwickler Bescheid wissen.

Es funktioniert an einem Eingabefeld, wo Sie können Autosuggest bestimmte Werte für die Eingabe. Das Standard-Setup sieht in Ordnung aus und wir haben ein paar Coding-Tipps zum Erstellen von coolen Effekten mit Autosuggest-Datalisten behandelt.

Es ist jedoch viel einfacher mit einem Plugin arbeiten sowie Flexdatalist. Es unterstützt ein breiteres Spektrum an Browsern und erlaubt es Ihnen Passen Sie das Design Ihres Datengebers vollständig an.

Nicht jeder hat einen Bedarf an Autocomplete-Funktionen. Mit nativen HTML5-Datalisten können Sie sich nicht mit einem Plugin beschäftigen. Flexdatalist ist jedoch vielleicht der beste da draußen baut auf einheimischen datalistischen Verhalten auf hinzufügen:

• Mobile responsive Unterstützung
• Zusätzliche Beschreibungen für jeden Artikel
• Optionen für mehrere Optionen gleichzeitig
• Benutzerdefinierte Ereignishandler

Es ist alle von jQuery angetrieben, also wirst du benötigen Sie eine Kopie der neuesten Version um das zum Laufen zu bringen. Es auch kommt mit einem eigenen CSS-Stylesheet die Sie möglicherweise in einer einzigen CSS-Datei kombinieren möchten, um HTTP-Anforderungen zu reduzieren.

Sie können finden vollständige Installationsanweisungen auf der Hauptdemoseite, die enthält Download-Links zu den Flexdatalist-Dateien.

Es ist sehr einfach einzurichten, mit Nur eine einzige Zeile JavaScript. Standardmäßig ist das Plugin zielt auf alle Eingaben mit der Klasse ab .Flexdatalist, Das Hinzufügen des Codes in Ihren Code sollte also ausreichen, um Ergebnisse zu sehen.

Sie fügen einfach das hinzu Element in Ihrem Eingabefeld und Flexdatalist kümmert sich um den Rest. Es wird stylen Sie die Liste automatisch, einschließlich optionalem beschreibenden Text.

Der einfachste Weg, zusätzlichen Text hinzuzufügen, ist durch eine JSON-Datei was du kannst Über ein Datenattribut an Ihre Eingabe anhängen.

Wenn Sie beispielsweise die Flexdatalist-Demoseite auschecken, finden Sie eine “Länder” Eingabefeld mit dem Attribut data-data = 'countries.json'. Dies verweist auf eine entfernte Datei speichert alle rohen Eingabedaten extern.

Zu viele dieser Felder können Sie verlangsamen Sie die Seite etwas. Ich kann mir jedoch nicht vorstellen, dass viele Websites mehr als ein paar dieser Datenformulare auf einer Seite ausführen würden, ganz zu schweigen davon, sogar mit diesem jQuery-Plugin immer noch ziemlich schnell.

Um zu beginnen, einfach Besuchen Sie das GitHub-Repo und laden Sie eine Kopie herunter. Dies beinhaltet a Link zur Hauptdemoseite Hier finden Sie auch eine vollständige Dokumentation für das Setup, JavaScript-Optionen und viele Beispiel-Codeausschnitte.