quickSearch – Plugin jQuery – La recherche facile dans vos listings

Après un long silence, je reviens avec de nouveaux articles pour 2013 !

Aujourd’hui, je vous fait découvrir (ou redécouvrir) un plugin jQuery qui va vous permettre de créer un petit moteur de recherche rapide pour vos listings sous forme de tableaux (balise table) ou de listes à puce (balise ul>li).

En effet, parfois, nous avons de longues listes de contenu où un moteur de recherche en javascript serai le bienvenue pour augmenter l’accessibilité et le coté pratique de vos pages web.

Ce plugin jQuery, c’est quickSearch, et il s’utilise de la manière suivante :

Admettons que nous avons une table sous cette forme :

<table id="table_example">
<thead>
    <tr>
        <th>Email</th>
        <th>Id</th>
        <th>Phone</th>
        <th>Date</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>devo@flexomat.com</th>
        <td>66672</td>
        <td>941-964-8535</td>
        <td>14/12/1988</td>
    </tr>
    <tr>
        <th>henry@mountdev.net</th>
        <td>35889</td>
        <td>941-964-9543</td>
        <td>19/1/1974</td>
    </tr>
    <tr>
        <th>found@mountdev.net</th>
        <td>03519</td>
        <td>941-964-1599</td>
        <td>6/8/2000</td>
    </tr>
[...]
</table>

Il vous faut ajouter un champ de formulaire pour les entrées de recherches, comme suit :

<form action="#">
    <input type="text" name="search" id="id_search" />
</form>

Puis initier le plugin jQuery, comme ceci dans sa version de base :

$('input#id_search').quicksearch('table#table_example tbody tr');

De là, une recherche se fera directement sur votre listing et seuls les champs avec le contenu de la recherche apparaitront.

plugin-jquery-quicksearch-code

Il y a de nombreuses options, afin d’optimiser ou de configurer la recherche, comme activer la recherche sur une ou plusieurs colonnes spécifiques, préciser les sélecteurs, ajouter des délais etc…

Pour télécharger le plugin jQuery quickSearch et avoir plus d’informations cliquez sur ce lien
Pour voir des exemples et démonstrations cliquez sur celui-ci

J’en profite aussi pour vous souhaiter une bonne année à tous ! :)

Articles qui peuvent vous intéresser :

Comments
  1. Lucie

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*