HTML, CSS et jQuery : dresser une liste de données avec filtrage de recherche-js tutoriel-php.cn

HTML, CSS et jQuery : dresser une liste de données avec filtrage de recherche

WBOY

Libérer： 2023-10-26 08:30:51

original

1011 Les gens l'ont consulté

HTML, CSS et jQuery : dresser une liste de données avec filtrage de recherche

HTML, CSS et jQuery : Créez une liste de données avec filtrage de recherche

Dans le développement Web, l'affichage des données et les fonctions de recherche sont souvent essentielles. Afin de permettre aux utilisateurs de trouver plus facilement les informations dont ils ont besoin, nous pouvons utiliser HTML, CSS et jQuery pour créer une liste de données avec fonction de filtrage de recherche. Des exemples de codes spécifiques sont détaillés ci-dessous.

Tout d'abord, nous avons besoin d'une structure HTML pour afficher la liste des données. Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
    <title>数据列表</title>
    <style>
        /* CSS样式 */
        .container {
            max-width: 500px;
            margin: 0 auto;
        }
        #search-input {
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
        }
        #data-list {
            list-style-type: none;
            padding: 0;
        }
        .data-item {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="search-input" placeholder="搜索">
        <ul id="data-list">
            <li class="data-item">数据1</li>
            <li class="data-item">数据2</li>
            <li class="data-item">数据3</li>
            <li class="data-item">数据4</li>
            <li class="data-item">数据5</li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons une zone de saisie et une liste non ordonnée pour afficher la liste des données. La zone de saisie est utilisée pour saisir des mots-clés de recherche et la liste non ordonnée est utilisée pour afficher les éléments de données.

Afin d'implémenter la fonction de filtrage de recherche, nous devons également écrire du code jQuery. Créez un nouveau fichier nommé script.js et copiez le code suivant dans le fichier : script.js的文件，并将以下代码复制到该文件中：

$(document).ready(function() {
    // 监听搜索输入框的键盘输入事件
    $('#search-input').on('keyup', function() {
        var searchText = $(this).val().toLowerCase();
        // 遍历所有数据项
        $('#data-list .data-item').filter(function() {
            var itemText = $(this).text().toLowerCase();
            // 隐藏不符合搜索关键字的数据项
            $(this).toggle(itemText.indexOf(searchText) > -1);
        });
    });
});

Copier après la connexion

以上代码使用了$(document).ready(function() {...})来确保页面加载完成后执行代码。它监听搜索输入框的键盘输入事件，并获取输入框中的搜索关键字。

接下来，通过filter方法遍历所有数据项，并根据搜索关键字隐藏不符合条件的数据项。toggle方法用于显示或隐藏数据项。

保存script.jsrrreee

Le code ci-dessus utilise $(document).ready(function() {.. .}) pour garantir que le code est exécuté après le chargement de la page. Il écoute les événements de saisie au clavier de la zone de saisie de recherche et obtient les mots-clés de recherche dans la zone de saisie.

Ensuite, parcourez tous les éléments de données via la méthode filter et masquez les éléments de données qui ne remplissent pas les conditions basées sur les mots-clés de recherche. La méthode toggle est utilisée pour afficher ou masquer des éléments de données. 🎜🎜Enregistrez le fichier script.js et incluez-le dans le code HTML. Maintenant, essayez de saisir des mots-clés dans la zone de saisie et vous pourrez voir que la liste de données est filtrée en temps réel en fonction des résultats de la recherche. 🎜🎜Avec les exemples de codes HTML, CSS et jQuery ci-dessus, nous avons réussi à créer une liste de données avec fonction de filtrage de recherche. Vous pouvez personnaliser davantage son style et ses fonctionnalités en fonction de vos besoins. Espérons que cet exemple vous aidera à mieux comprendre comment utiliser HTML, CSS et jQuery pour créer des listes de données et ajouter une fonctionnalité de filtrage de recherche. 🎜

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!