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>
</tbody>
</table>

 

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


<form action="#"><input id="id_search" name="search" type="text" /></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 :

Author: Franck Pertegas

Share This Post On

2 Comments

  1. Un grand merci pour ce code, exactement ce dont j’avais besoin 🙂

    Post a Reply
  2. Bonjour,

    Ce tableau est super.

    En revanche, comment faire pour neutraliser les accents dans la recherche et le tableau?

    Merci beaucoup

    Post a Reply

Trackbacks/Pingbacks

  1. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] de textes quickSearch jQuery Validation Select Text Searcher MarkItUp ! [...]
  2. Growl – Plugin jQuery – La SimpleBox | LudiBlog - [...] quickSearch – Plugin jQuery – La recherche facile dans vos listings [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée.