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

Maison

interface Web

js tutoriel

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 26, 2023 am 08:30 AM

css jquery html Liste de données Filtre de recherche

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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7342

Tutoriel Java

1627

Tutoriel CakePHP

1352

Tutoriel Laravel

1265

Tutoriel PHP

1210

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles