Comment créer une invite de zone de saisie de texte dynamique en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

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

王林

Libérer： 2023-10-24 09:16:49

original

1487 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

在上面的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();
    });
});

Copier après la connexion

在上面的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!