boîte d'étirement de requête jquery

JQuery est une bibliothèque JavaScript simple et facile à utiliser. Il encapsule de nombreuses opérations JavaScript courantes et fournit un moyen simple de manipuler des documents HTML et des éléments DOM. Dans cet article, nous présenterons aux lecteurs comment utiliser JQuery pour créer une boîte d'étirement de requête.

La boîte d'étirement de requête est un composant courant dans les applications Web, qui permet aux utilisateurs de saisir des conditions de requête et de renvoyer des résultats. Il comprend généralement une zone de texte et un bouton "Rechercher" facultatif. Lorsque les utilisateurs saisissent des conditions de requête, la zone d'étirement filtre automatiquement les résultats en fonction des conditions de saisie, aidant ainsi les utilisateurs à trouver plus rapidement ce dont ils ont besoin.

Pour créer une boîte d'étirement de requête à l'aide de JQuery, nous avons besoin des étapes suivantes :

1. Créez un élément de boîte d'étirement dans un document HTML.

Nous pouvons créer des boîtes extensibles en utilisant des éléments de base du HTML. En règle générale, une zone d'étirement comprend une zone de saisie et un bouton de recherche. La zone de saisie est utilisée pour saisir les conditions de requête et le bouton de recherche est utilisé pour déclencher l'opération de recherche.

Ce qui suit est un code HTML simple pour créer une boîte d'étirement de requête :

<div class="search-container">
  <input type="text" placeholder="输入搜索关键字...">
  <button class="search-button">搜索</button>
</div>

Dans cet exemple, nous créons un élément DIV avec le nom de classe "search-container" qui contient une "zone de saisie et un bouton de recherche avec la classe nommez "bouton de recherche". L'attribut « espace réservé » dans la zone de saisie fournit un texte par défaut pour la zone de saisie afin d'aider l'utilisateur à comprendre ce qu'il doit saisir.

2. Ajouter la bibliothèque JQuery à la page

Pour utiliser la bibliothèque JQuery, nous devons ajouter un lien vers la bibliothèque JQuery en tête ou en pied de page. Voici un lien simple pour ajouter la bibliothèque JQuery à une page HTML :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Lorsque nous ajoutons la bibliothèque JQuery à un document HTML en utilisant ce lien, nous pouvons utiliser toutes les fonctionnalités de JQuery pour manipuler les éléments du document.

3. Écrire du code JQuery pour implémenter la fonction de requête

Une fois que nous avons créé l'élément de boîte d'étirement dans la page et ajouté la bibliothèque JQuery, nous pouvons commencer à écrire du code JQuery pour implémenter la fonction de boîte d'étirement. Nous allons écrire le code suivant pour filtrer les éléments par le texte saisi dans la zone de saisie et afficher les résultats sur la page.

$(document).ready(function(){
    $('.search-button').click(function(){
        var searchText = $('.search-container input').val();
        $('.search-list li').each(function(){
            if($(this).text().toUpperCase().indexOf(searchText.toUpperCase()) == -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

Le code JQuery ci-dessus utilise les étapes suivantes :

1. Nous utilisons la fonction .ready() pour envelopper le code dans une fonction qui n'est exécutée que lorsque la page est prête.
2. Nous utilisons la fonction .click() pour envelopper le code dans une fonction qui est exécutée lorsque vous cliquez sur le bouton de recherche.
3. Nous obtenons d'abord les critères de requête saisis par l'utilisateur, qui sont stockés dans la valeur du champ de recherche.
4. Nous utilisons la fonction .each() pour parcourir la liste d'éléments contenant les résultats (la liste d'éléments ici prend une liste non ordonnée avec le nom de classe "search-list" comme exemple).
5. Exécutez une fonction sur chaque élément, si la condition de requête correspond au texte d'un élément, affichez l'élément, sinon masquez-le.

Lorsque l'utilisateur clique sur le bouton de recherche, le code JQuery vérifiera chaque élément de la liste et les masquera s'ils ne contiennent pas les critères de requête. S'ils contiennent des critères de requête, ils resteront visibles.

4. Style CSS

Enfin, pour que la boîte d'étirement de la requête ressemble à un ensemble d'éléments séparés, nous devons ajouter du style CSS. Voici un style CSS simple pour appliquer le style du champ de recherche et du bouton de recherche à toutes les zones d'étirement de requête de la page :

.search-container {
  display: flex;
  align-items: center;
}

.search-container input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search-container button {
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #388e3c;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #388e3c;
}

Dans le style CSS ci-dessus, nous avons défini certains styles sous la classe .search-container, ces styles sont appliqués à l'élément DIV contenant le champ de recherche et le bouton de recherche. Nous avons également défini des styles spécifiques pour la zone de saisie et le bouton de recherche afin de les rendre plus beaux.

Conclusion

Dans cet article, nous avons présenté aux lecteurs comment utiliser JQuery pour créer une boîte d'étirement de requête. Nous avons atteint cet objectif en quatre étapes : création d'éléments HTML, ajout de la bibliothèque JQuery, écriture du code JQuery et ajout de styles CSS. JQuery facilite non seulement la création de boîtes d'étirement de requête, mais rend également les applications Web plus conviviales et plus faciles à utiliser.

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!