Heim > Artikel > Web-Frontend > Wie implementiert man mit JavaScript die Funktion zur automatischen Vervollständigung des Eingabefeldinhalts des Formulars?

Wie implementiert man mit JavaScript die Funktion zur automatischen Vervollständigung des Eingabefeldinhalts des Formulars?

王林Original: 2023-10-24 12:19:461546Durchsuche

如何使用 JavaScript 实现表单的输入框内容自动补全提示功能？

Wie verwende ich JavaScript, um die Funktion zur automatischen Vervollständigung des Eingabefeldinhalts des Formulars zu implementieren?

Mit der Entwicklung des Internets wird die automatische Vervollständigungsfunktion von Formulareingabefeldern immer häufiger. Wenn Benutzer Inhalte eingeben, werden mögliche Vervollständigungsoptionen basierend auf vorhandenen Daten bereitgestellt, um Benutzern die schnelle Auswahl oder Eingabe der richtigen Informationen zu erleichtern. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Aufforderungsfunktion zur automatischen Vervollständigung des Eingabefeldinhalts des Formulars implementieren und spezifische Codebeispiele bereitstellen.

Schritt 1: HTML-Struktur erstellen

Zuerst müssen wir eine einfache HTML-Struktur erstellen und ihr ein Texteingabefeld hinzufügen. Ein Beispiel ist wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单自动补全提示</title>
</head>
<body>
    <form>
        <input type="text" id="inputBox" autocomplete="off">
    </form>

    <ul id="suggestionList"></ul>
</body>
</html>

Im obigen Code erstellen wir ein Texteingabefeld mit der ID „inputBox“ und deaktivieren die standardmäßige Autovervollständigungsfunktion (autocomplete="off"). Darüber hinaus haben wir auch eine leere ungeordnete Liste erstellt, um die Eingabeaufforderungsoptionen für die automatische Vervollständigung anzuzeigen. autocomplete="off"）。另外，我们还创建了一个空的无序列表 ul，用于显示自动补全的提示选项。

第二步：实现 JavaScript 功能

接下来，我们使用 JavaScript 来实现表单的自动补全提示功能。在代码中，我们将监听输入框的键盘事件，当用户输入内容时，将根据已存在的数据生成并显示自动补全的提示选项。

// JavaScript 代码
var inputBox = document.getElementById('inputBox'); // 获取输入框元素
var suggestionList = document.getElementById('suggestionList'); // 获取提示选项的列表元素

// 模拟已存在的数据
var data = ['apple', 'banana', 'cherry', 'grape', 'orange'];

inputBox.addEventListener('input', function() {
    var inputValue = inputBox.value; // 获取输入框的值
    suggestionList.innerHTML = ''; // 清空提示选项列表

    // 根据输入内容生成提示选项
    var suggestions = data.filter(function(item) {
        return item.includes(inputValue);
    });

    suggestions.forEach(function(item) {
        var li = document.createElement('li');
        li.textContent = item;
        suggestionList.appendChild(li);
    });
});

// 点击提示选项时，将选项的值填入输入框
suggestionList.addEventListener('click', function(e) {
    var selectedValue = e.target.textContent;
    inputBox.value = selectedValue;
});

在上述代码中，我们首先获取输入框元素和提示选项的列表元素。然后，我们模拟了一组已存在的数据（data）。接着，我们监听输入框的 input 事件，在用户输入内容时触发处理函数。

处理函数首先获取输入框的值，然后清空提示选项列表。之后，根据输入内容从已存在的数据中筛选出符合条件的提示选项。筛选过程中，我们使用了 includes

Schritt 2: Implementieren Sie die JavaScript-Funktion

Als nächstes implementieren wir JavaScript, um die Funktion zur automatischen Vervollständigung des Formulars zu implementieren. Im Code hören wir auf die Tastaturereignisse des Eingabefelds. Wenn der Benutzer Inhalte eingibt, werden Optionen zur automatischen Vervollständigung generiert und basierend auf den vorhandenen Daten angezeigt.

rrreee

Im obigen Code erhalten wir zunächst das Eingabefeldelement und das Listenelement der Eingabeaufforderungsoption. Anschließend haben wir einen vorhandenen Datensatz simuliert. Als nächstes hören wir auf das Eingabeereignis des Eingabefelds und lösen die Handlerfunktion aus, wenn der Benutzer Inhalte eingibt.

Die Verarbeitungsfunktion ruft zuerst den Wert des Eingabefelds ab und löscht dann die Liste der Eingabeaufforderungsoptionen. Anschließend werden die Eingabeaufforderungsoptionen, die die Bedingungen erfüllen, basierend auf dem Eingabeinhalt aus den vorhandenen Daten herausgefiltert. Während des Filtervorgangs haben wir die Methode includes verwendet, um zu bestimmen, ob die vorhandenen Daten den Eingabeinhalt enthalten. Abschließend fügen wir die generierten Eingabeaufforderungsoptionen nacheinander zur Liste der Eingabeaufforderungsoptionen hinzu. 🎜🎜Darüber hinaus haben wir uns auch das Klickereignis der Eingabeaufforderungsoptionsliste angehört. Wenn der Benutzer auf eine Eingabeaufforderungsoption klickt, wird der Wert der Option in das Eingabefeld eingetragen. 🎜🎜Zusammenfassung: 🎜🎜Es ist sehr einfach, JavaScript zu verwenden, um die Funktion zur automatischen Vervollständigung des Eingabefeldinhalts des Formulars zu implementieren. Wir müssen nur das Eingabeereignis des Eingabefelds abhören, Eingabeaufforderungsoptionen basierend auf vorhandenen Daten generieren und anzeigen und dann den Wert des Eingabefelds eingeben, wenn der Benutzer eine Option auswählt. Auf diese Weise können Benutzer die korrekten Informationen bequemer eingeben und so das Benutzererlebnis verbessern. Ich hoffe, dass die Einführung in diesem Artikel allen helfen kann. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man mit JavaScript die Funktion zur automatischen Vervollständigung des Eingabefeldinhalts des Formulars?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 事件 input 键盘事件 ul

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：Wie man mit dem Layui-Framework eine Bahnserviceplattform entwickelt, die die sofortige Abfrage und Buchung von Bahntickets unterstütztNächster Artikel：Wie man mit dem Layui-Framework eine Bahnserviceplattform entwickelt, die die sofortige Abfrage und Buchung von Bahntickets unterstützt

In Verbindung stehende Artikel

Mehr sehen