Maison > Article > interface Web > Comment utiliser JavaScript pour implémenter la fonction d'invite de complétion automatique du contenu de la zone de saisie du formulaire ?

Comment utiliser JavaScript pour implémenter la fonction d'invite de complétion automatique du contenu de la zone de saisie du formulaire ?

王林original: 2023-10-24 12:19:461516parcourir

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

Comment utiliser JavaScript pour implémenter la fonction d'invite de complétion automatique du contenu de la zone de saisie du formulaire ?

Avec le développement d'Internet, la fonction d'invite de saisie semi-automatique des zones de saisie de formulaire devient de plus en plus courante. Lorsque les utilisateurs saisissent du contenu, des options de complétion possibles seront fournies en fonction des données existantes pour permettre aux utilisateurs de sélectionner ou de saisir rapidement les informations correctes. Cet article explique comment utiliser JavaScript pour implémenter la fonction d'invite de complétion automatique du contenu de la zone de saisie du formulaire et fournit des exemples de code spécifiques.

Étape 1 : Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML simple et y ajouter une zone de saisie de texte. Un exemple est le suivant :

<!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>

Dans le code ci-dessus, nous créons une zone de saisie de texte avec l'identifiant "inputBox" et désactivons la fonction de saisie semi-automatique par défaut (autocomplete="off"). De plus, nous avons également créé une liste vide non ordonnée ul pour afficher les options d'invite de saisie semi-automatique. 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

Étape 2 : Implémenter la fonction JavaScript

Ensuite, nous utilisons JavaScript pour implémenter la fonction d'invite de saisie semi-automatique du formulaire. Dans le code, nous écouterons les événements du clavier de la zone de saisie lorsque l'utilisateur saisit du contenu, des options d'invite de saisie semi-automatique seront générées et affichées en fonction des données existantes.

rrreee

Dans le code ci-dessus, nous obtenons d'abord l'élément de zone de saisie et l'élément de liste de l'option d'invite. Ensuite, nous avons simulé un ensemble de données existant. Ensuite, nous écoutons l'événement d'entrée de la zone de saisie et déclenchons la fonction de gestionnaire lorsque l'utilisateur saisit du contenu.

La fonction de traitement obtient d'abord la valeur de la zone de saisie, puis efface la liste des options d'invite. Ensuite, les options d'invite qui remplissent les conditions sont filtrées des données existantes en fonction du contenu d'entrée. Pendant le processus de filtrage, nous avons utilisé la méthode includes pour déterminer si les données existantes contiennent le contenu d'entrée. Enfin, nous ajoutons les options d'invite générées à la liste des options d'invite une par une. 🎜🎜De plus, nous avons également écouté l'événement click de la liste des options d'invite. Lorsque l'utilisateur clique sur une option d'invite, la valeur de l'option est renseignée dans la zone de saisie. 🎜🎜Résumé : 🎜🎜Il est très simple d'utiliser JavaScript pour implémenter la fonction d'invite de complétion automatique du contenu de la zone de saisie du formulaire. Il nous suffit d'écouter l'événement d'entrée de la zone de saisie, de générer et d'afficher des options d'invite basées sur les données existantes, puis de remplir la valeur de la zone de saisie lorsque l'utilisateur sélectionne une option. De cette manière, les utilisateurs peuvent saisir des informations correctes plus facilement, améliorant ainsi l’expérience utilisateur. J'espère que l'introduction de cet article pourra aider tout le monde. 🎜

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!

JavaScript html 事件 input 键盘事件 ul

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le framework Layui pour développer une plateforme de services ferroviaires qui prend en charge la requête et la réservation instantanées de billets de trainArticle suivant：Comment utiliser le framework Layui pour développer une plateforme de services ferroviaires qui prend en charge la requête et la réservation instantanées de billets de train

Articles Liés

Voir plus