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
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
