Comment créer un composant combobox avec une fonction de requête floue à l'aide de jQuery

La requête floue de la combobox jQuery est une forme courante de champ de recherche. Les utilisateurs peuvent saisir des mots-clés à rechercher. Par rapport à une recherche précise, la requête floue est plus pratique et plus rapide. Dans cet article, nous présenterons comment utiliser jQuery pour créer un composant combobox avec une fonctionnalité de requête floue.

1. Connaissances de base

Pour utiliser la requête floue jQuery combobox, vous devez maîtriser les connaissances de base suivantes :

1. jQuery

jQuery est une bibliothèque JavaScript rapide et concise qui permet la manipulation de documents HTML, le traitement d'événements et les effets d'animation. et AJAX Plus facile à utiliser. L'utilisation de jQuery peut grandement simplifier la complexité de la programmation JavaScript.

2. Combobox

Combobox est un composant composé d'une zone de texte et d'une zone de liste déroulante, dans laquelle les utilisateurs peuvent saisir du texte ou sélectionner des éléments dans la liste déroulante. Parmi eux, la zone de texte est utilisée pour saisir des mots-clés et la liste déroulante est utilisée pour afficher les résultats de la recherche.

3. Requête floue

La requête floue signifie que lorsque l'utilisateur saisit un mot-clé, le système renvoie tous les résultats de recherche contenant le mot-clé, plutôt que les résultats de recherche qui correspondent exactement au mot-clé.

2. Créer une requête floue jQuery Combobox

Voici les étapes pour créer une requête floue jQuery Combobox :

1. Introduire la bibliothèque jQuery

Introduire la bibliothèque jQuery en tête de page :

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. Créer des zones de texte et listes déroulantes

Le code HTML est le suivant :

<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>

3. Définir la fonction JS

Ajouter le code suivant en fin de page :

$(function() {
  var availableResults = [
    "Result 1",
    "Result 2",
    "Result 3",
    "Result 4",
    "Result 5"
  ];
 
  $("#search").autocomplete({
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(availableResults, function(item) {
        return matcher.test(item);
      }));
    }
  });
});

4. Test de page

Ouvrez la page, saisissez le mot-clé dans la zone de recherche, la liste déroulante affichera tous les fichiers contenant ces résultats de recherche par mot clé.

3. Exemple de code complet

  
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
  <script>
  $( function() {
    var availableResults = [
      "Result 1",
      "Result 2",
      "Result 3",
      "Result 4",
      "Result 5"
    ];
    $( "#search" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( availableResults, function( item ){
            return matcher.test( item );
        }) );
      }
    });
  } );
  </script>


 
<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>
 

Résumé :

Voici toutes les étapes pour utiliser jQuery pour créer une requête floue Combobox Avec cette technologie, vous pouvez développer rapidement des applications Web dotées de puissantes capacités de recherche. Dans le même temps, nous devons également veiller à garantir l’efficacité des requêtes et l’exactitude des données de la base de données afin d’obtenir une meilleure expérience utilisateur.

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!