suchen

Heim >Web-Frontend >H5-Tutorial >Beispiel für die Verwendung des HTML5-Datalist-Tags (Autovervollständigungskomponente)

Beispiel für die Verwendung des HTML5-Datalist-Tags (Autovervollständigungskomponente)

PHP中文网
PHP中文网Original
2017-03-27 16:57:002672Durchsuche

Früher musste ich eine Autovervollständigungskomponente (Suggest) mit JS schreiben, was sehr mühsam war. Im HTML5-Zeitalter besteht keine Notwendigkeit, das Datalist-Tag direkt zu verwenden, was den Arbeitsaufwand direkt reduziert. Wie unten gezeigt 

<!DOCTYPE html>
<html>
 <head>
    <title>HTML5 datalist tag</title>
    <meta charset="utf-8">
 </head>
    <p>
        浏览器版本：<input list="words">
    </p>
    <datalist id="words">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
        <option value="Sogou">
        <option value="Maxthon">
    </datalist>
 </body>
</html>

datalist stellt eine vordefinierte Liste bereit, die der Eingabe über die ID zugeordnet ist. Beim Eingeben der Eingabe wird eine Autovervollständigungsfunktion angezeigt und dem Benutzer wird eine Dropdown-Liste angezeigt für seine Wahl.

Beispiel für die Verwendung des HTML5-Datalist-Tags (Autovervollständigungskomponente)

Chrome/Firefox/Opera und IE10 werden alle unterstützt, Safari unterstützt es immer noch nicht bis Version 7.

Verwandte Artikel:

Tägliche HTML5-Praxis: Verwendung der automatischen Vervollständigung von Datenlisten-Tags

Datenlisten-Tag

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung und Anwendungsbeispiele für HTML5-Download-Attribute_html5-TutorialfähigkeitenNächster Artikel：Detaillierte Einführung und Anwendungsbeispiele für HTML5-Download-Attribute_html5-Tutorialfähigkeiten

In Verbindung stehende Artikel

Mehr sehen