Maison > Article > interface Web > Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions de recherche dans les pages Web
Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions de recherche dans les pages Web
- PHPzoriginal
- 2023-10-25 11:38:101360parcourir
Comment utiliser HTML, CSS et jQuery pour implémenter la fonction de recherche dans une page Web
Introduction :
Avec le développement rapide d'Internet, les moteurs de recherche sont devenus un moyen important pour obtenir des informations. Cependant, dans certains cas, nous devrons peut-être implémenter une fonction de recherche dans une page Web spécifique afin que les utilisateurs puissent trouver rapidement ce qu'ils recherchent. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter la fonction de recherche dans les pages Web et donnera des exemples de code spécifiques.
1. Code de la partie HTML :
Tout d'abord, nous devons utiliser HTML pour créer la structure de base de la page Web, et ajouter un champ de recherche et une zone pour afficher les résultats de recherche. Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页内搜索功能</title>
<style>
/* CSS样式代码在下一部分给出 */
</style>
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" placeholder="请输入关键字...">
<button id="search-button">搜索</button>
</div>
<div id="search-results">
<!-- 搜索结果显示在这里 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/* jQuery代码在下一部分给出 */
</script>
</body>
</html> 2. Code de la partie CSS :
Ensuite, nous devons utiliser CSS pour embellir le style du champ de recherche et de la zone de résultats de recherche. Le code est le suivant :
.search-container {
text-align: center;
margin-top: 20px;
}
#search-input {
width: 300px;
height: 40px;
font-size: 16px;
padding: 5px 10px;
border: none;
border-radius: 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
outline: none;
}
#search-button {
width: 80px;
height: 40px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}
#search-results {
margin-top: 20px;
} 3. Partie jQuery du code :
Enfin, nous utilisons jQuery pour implémenter la fonction de recherche. Le code est le suivant :
$(document).ready(function() {
$("#search-button").click(function() {
var keyword = $("#search-input").val(); // 获取搜索关键字
// 遍历网页内的所有要搜索的元素，并将匹配到的结果显示在搜索结果区域
$("p, h1, h2, h3, h4, h5, h6").each(function() {
var text = $(this).text(); // 获取元素的文本内容
if (text.includes(keyword)) {
$(this).css("background-color", "yellow");
} else {
$(this).css("background-color", ""); // 清除之前匹配到的元素的背景颜色
}
});
});
});Explication du code :
- Tout d'abord, nous écrivons le code dans la fonction $(document).ready() pour nous assurer que la page est chargée avant de s'exécuter.
- Lorsque l'on clique sur le bouton de recherche, on obtient les mots-clés dans le champ de recherche, puis on utilise la fonction each() pour parcourir tous les éléments à rechercher (en supposant ici que les éléments à rechercher sont des titres et des paragraphes dans la page ).
- Pour chaque élément, nous obtenons son contenu textuel via la fonction text() et utilisons la fonction include() pour déterminer s'il contient des mots-clés.
- Si le mot-clé est inclus, nous définissons la couleur d'arrière-plan sur jaune via la fonction css(), indiquant que le résultat correspond ; si le mot-clé n'est pas inclus, nous effaçons la couleur d'arrière-plan de l'élément précédemment correspondant ;
Résumé :
Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons facilement implémenter la fonction de recherche au sein de la page Web. Les utilisateurs peuvent saisir des mots-clés dans le champ de recherche, et après avoir cliqué sur le bouton de recherche, la page mettra en évidence les éléments correspondant aux mots-clés pour aider les utilisateurs à localiser rapidement le contenu qu'ils souhaitent. Ce qui précède sont les instructions d'utilisation avec des exemples de code spécifiques. J'espère que cela sera utile à 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!