Maison > Article > interface Web > Comment créer une invite de zone de saisie de texte dynamique en utilisant HTML, CSS et jQuery

Comment créer une invite de zone de saisie de texte dynamique en utilisant HTML, CSS et jQuery

王林original: 2023-10-24 09:16:491404parcourir

Comment créer une invite de zone de saisie de texte dynamique à l'aide de HTML, CSS et jQuery

Dans le développement Web, les invites de zone de saisie de texte dynamique sont souvent utilisées pour offrir une meilleure expérience utilisateur. En affichant les options de saisie possibles en temps réel, vous pouvez aider les utilisateurs à choisir rapidement le bon contenu. Cet article vous apprendra comment utiliser HTML, CSS et jQuery pour créer une invite de zone de saisie de texte dynamique afin d'améliorer l'expérience interactive de l'utilisateur.

HTML, CSS et jQuery sont nécessaires pour implémenter cette fonction. Tout d'abord, nous commençons par créer une structure HTML simple comme indiqué ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本输入框提示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label for="input">请输入内容</label>
        <input type="text" id="input" autocomplete="off">
        <ul id="suggestions"></ul>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Dans le code HTML ci-dessus, nous créons un conteneur qui contient une zone de saisie et une liste non ordonnée qui affiche le contenu suggéré. En ajoutant une étiquette, nous pouvons fournir des informations rapides liées à la zone de saisie.

Ensuite, nous devons écrire des styles CSS pour embellir notre zone de saisie et le contenu suggéré. Dans le fichier styles.css, nous pouvons ajouter le code suivant : styles.css文件中，我们可以添加以下代码：

.container {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding-top: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

在上面的CSS代码中，我们设置了整体的容器样式，并对输入框和建议内容进行了一些基本的样式定义。注意，我们设置了建议内容列表的显示状态为display: none;，以便在用户输入内容时动态显示。

最后，我们需要使用jQuery编写一些脚本来实现文本输入框的提示功能。在script.js文件中，我们可以添加以下代码：

$(document).ready(function() {
    $('#input').on('input', function() {
        var input = $(this).val().toLowerCase();
        
        if (input.length > 0) {
            $('#suggestions').empty().show();
            
            // 模拟异步获取建议内容
            setTimeout(function() {
                var suggestions = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape', 'honeydew'];
                
                suggestions.forEach(function(item) {
                    if (item.indexOf(input) > -1) {
                        $('<li>').text(item).appendTo('#suggestions');
                    }
                });
            }, 300);
        } else {
            $('#suggestions').empty().hide();
        }
    });
    
    $('body').on('click', '#suggestions li', function() {
        var text = $(this).text();
        $('#input').val(text);
        $('#suggestions').empty().hide();
    });
});

在上面的JavaScript代码中，我们首先通过$('#input').on('input', function() { ... })rrreee

Dans le code CSS ci-dessus, nous définissons le style global du conteneur et apportons quelques modifications de base à la zone de saisie et au contenu de la suggestion. Définition du style . Notez que nous définissons l'état d'affichage de la liste de contenu suggéré sur display: none; afin qu'elle puisse être affichée dynamiquement lorsque l'utilisateur saisit du contenu.

Enfin, nous devons utiliser jQuery pour écrire des scripts afin d'implémenter la fonction d'invite de la zone de saisie de texte. Dans le fichier script.js, on peut ajouter le code suivant :

rrreee

Dans le code JavaScript ci-dessus, on passe d'abord $('#input').on('input', function() { ... }) pour écouter l'événement d'entrée de la zone de saisie. Lorsque l'utilisateur commence à taper, nous obtenons le contenu d'entrée et effectuons le filtrage et l'affichage recommandés en fonction du contenu. Pour simuler l'acquisition réelle de contenu de suggestions, nous avons utilisé une minuterie et défini quelques exemples de contenu de suggestions.

Lorsque l'utilisateur clique sur un élément dans le contenu suggéré, nous remplirons le contenu de l'élément sélectionné dans la zone de saisie et masquerons la liste de contenu suggéré. 🎜🎜À ce stade, nous avons terminé la mise en œuvre des invites de zone de saisie de texte dynamique. Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons améliorer l'expérience utilisateur en affichant des suggestions correspondantes en temps réel au fur et à mesure que l'utilisateur tape. 🎜🎜J'espère que cet article pourra vous aider à comprendre comment utiliser HTML, CSS et jQuery pour créer une invite de zone de saisie de texte dynamique et fournir des exemples de code spécifiques pour votre référence. Je vous souhaite du succès dans le développement Web ! 🎜

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 jquery css html JS function 事件 display input

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 Layui pour obtenir des effets de glissement et de zoom d'imageArticle suivant：Comment utiliser Layui pour obtenir des effets de glissement et de zoom d'image

Articles Liés

Voir plus