Verwendung von JavaScript zur Implementierung der automatischen Formularvervollständigung

Verwenden Sie JavaScript, um die Funktion zur automatischen Vervollständigung von Formularen zu implementieren.

Mit der Entwicklung des Internets spielen Webformulare eine sehr wichtige Rolle in unserem täglichen Leben. Um das Benutzererlebnis zu verbessern und den Benutzern mehr Komfort zu bieten, ist die Funktion zur automatischen Vervollständigung von Formularen zu einer unverzichtbaren Funktion geworden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zur automatischen Vervollständigung von Formularen implementieren, und entsprechende Codebeispiele bereitstellen.

Zuerst benötigen wir eine Datenbank oder Datenquelle, die Autovervollständigungsoptionen enthält. Diese Optionen können wir im Voraus vorbereiten oder vom Server beziehen. In diesem Artikel verwenden wir ein einfaches Array als Datenquelle. Ein Beispiel lautet wie folgt:

var autofillOptions = ["apple", "banana", "cherry", "durian", "elderberry", "fig", "grape", "honeydew", "imbe", "jackfruit"];

Als nächstes müssen wir Ereignis-Listener für die Formularelemente hinzufügen, die der Benutzer eingibt. Wenn der Benutzer mit der Eingabe beginnt, wird die Option zur automatischen Vervollständigung angezeigt. Das Codebeispiel lautet wie folgt:

var inputElement = document.getElementById("input"); // 获取表单元素

inputElement.addEventListener("input", function() {
  var inputText = inputElement.value; // 获取用户输入的文本
  var autocompleteList = document.getElementById("autocomplete-list"); // 获取自动补全选项列表元素

  // 清空自动补全选项列表
  autocompleteList.innerHTML = "";

  // 遍历数据源，匹配用户输入的文本
  autofillOptions.forEach(function(option) {
    if (option.startsWith(inputText)) {
      // 创建一个自动补全选项项
      var optionElement = document.createElement("div");
      optionElement.textContent = option;

      // 添加点击事件监听器，将选项填入表单元素
      optionElement.addEventListener("click", function() {
        inputElement.value = option;
        autocompleteList.innerHTML = "";
      });

      // 将选项添加到自动补全选项列表中
      autocompleteList.appendChild(optionElement);
    }
  });
});

Im obigen Code rufen wir zunächst das vom Benutzer eingegebene Formularelement ab und fügen dem Element einen input-Ereignis-Listener hinzu. Bei jeder Benutzereingabe wird der Ereignis-Listener ausgelöst und generiert dynamisch Autovervollständigungsoptionen basierend auf dem vom Benutzer eingegebenen Text. input事件监听器。在用户每次输入时，该事件监听器会被触发，并根据用户输入的文本，动态生成自动补全选项。

接下来，我们遍历数据源中的每一个选项，使用startsWith()方法来判断该选项是否以用户输入的文本开头。如果是的话，我们创建一个包含选项文本的div元素，并为该元素添加了一个点击事件监听器。该监听器会在用户点击选项时，将选项填入表单元素，并清空自动补全选项列表。

最后，我们将生成的自动补全选项添加到一个名为autocomplete-list

Als nächstes durchlaufen wir jede Option in der Datenquelle und verwenden die Methode startsWith(), um zu bestimmen, ob die Option mit dem vom Benutzer eingegebenen Text beginnt. Wenn ja, erstellen wir ein div-Element, das den Optionstext enthält, und fügen dem Element einen Click-Event-Listener hinzu. Dieser Listener füllt das Formularelement mit Optionen und löscht die Optionsliste für die automatische Vervollständigung, wenn der Benutzer auf die Option klickt.

Schließlich fügen wir die generierten Autocomplete-Optionen einem Element namens autocomplete-list hinzu. Sie können dieses Element als ausgeblendete Dropdown-Liste definieren oder Stile verwenden, um es auszublenden. 🎜🎜Zusammenfassend lässt sich sagen, dass die Verwendung von JavaScript zur Implementierung der automatischen Formularvervollständigung die Benutzererfahrung verbessern und es Benutzern ermöglichen kann, Formularinhalte schneller einzugeben. Wir können diese Funktion einfach implementieren, indem wir die Eingabeereignisse der Formularelemente abhören, dynamisch Autovervollständigungsoptionen generieren und die Formularelemente ausfüllen, wenn der Benutzer auf die Option klickt. Ich hoffe, dass die in diesem Artikel bereitgestellten Codebeispiele für Sie hilfreich sind. 🎜

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript zur Implementierung der automatischen Formularvervollständigung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!