Utiliser JavaScript pour implémenter la saisie semi-automatique des formulaires

Utilisez JavaScript pour implémenter la fonction de saisie semi-automatique des formulaires

Avec le développement d'Internet, les formulaires Web jouent un rôle très important dans notre vie quotidienne. Afin d'améliorer l'expérience utilisateur et d'offrir plus de commodité aux utilisateurs, la fonction de saisie semi-automatique des formulaires est devenue une fonctionnalité indispensable. Cet article explique comment utiliser JavaScript pour implémenter la fonction de saisie semi-automatique du formulaire et fournit des exemples de code correspondants.

Tout d’abord, nous avons besoin d’une base de données ou d’une source de données contenant des options de saisie semi-automatique. Ces options peuvent être préparées à l'avance par nous-mêmes ou obtenues auprès du serveur. Dans cet article, nous utiliserons un simple tableau comme source de données, un exemple est le suivant :

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

Ensuite, nous devons ajouter des écouteurs d'événements pour les éléments de formulaire saisis par l'utilisateur. Lorsque l'utilisateur commence à taper, nous afficherons l'option de saisie semi-automatique. L'exemple de code est le suivant :

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);
    }
  });
});

Dans le code ci-dessus, nous obtenons d'abord l'élément de formulaire saisi par l'utilisateur et ajoutons un écouteur d'événement input à l'élément. Chaque fois que l'utilisateur entre, l'écouteur d'événements sera déclenché et générera dynamiquement des options de saisie semi-automatique basées sur le texte saisi par l'utilisateur. input事件监听器。在用户每次输入时，该事件监听器会被触发，并根据用户输入的文本，动态生成自动补全选项。

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

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

Ensuite, nous parcourons chaque option de la source de données et utilisons la méthode startsWith() pour déterminer si l'option commence par le texte saisi par l'utilisateur. Si tel est le cas, nous créons un élément div contenant le texte de l'option et ajoutons un écouteur d'événement click à l'élément. Cet écouteur remplira l'élément de formulaire avec des options et effacera la liste des options de saisie semi-automatique lorsque l'utilisateur clique sur l'option.

Enfin, nous ajoutons les options de saisie semi-automatique générées à un élément appelé autocomplete-list. Vous pouvez définir cet élément comme une liste déroulante masquée ou utiliser des styles pour le masquer. 🎜🎜Pour résumer, l'utilisation de JavaScript pour implémenter la saisie semi-automatique des formulaires peut améliorer l'expérience utilisateur et permettre aux utilisateurs de saisir le contenu du formulaire plus rapidement. Nous pouvons facilement implémenter cette fonctionnalité en écoutant les événements d'entrée des éléments du formulaire, en générant dynamiquement des options de saisie semi-automatique et en remplissant les éléments du formulaire lorsque l'utilisateur clique sur les options. J'espère que les exemples de code fournis dans cet article vous seront utiles. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!