jQuery Plugin : LiveFilter, proposer un filtre sur les données d’une liste

Voici un plugin jQuery qui va vous permettre d’ajouter un moteur de recherche (ou plutôt un filtre) à une liste de données.

A partir d’une structure html comme suit :

[html]
<div id="live_filter">
<input type="text" class="filter" name="liveFilter" />
<ul>
<li>This is list item 1.</li>
<li>This is list item 2.</li>
<li>This is list item 3.</li>
<li>This is list item 4.</li>
<li>This is list item 5.</li>
<li>This is list item 6.</li>
<li>This is list item 7.</li>
<li>This is list item 8.</li>
<li>This is list item 9.</li>
<li>This is list item 10.</li>
</ul>
</div>
[/html]

Lorsqu’on applique le script :

[javascript]
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.liveFilter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘#live_filter’).liveFilter(‘ul’);
});
</script>
[/javascript]

On obtient initialement :

Et lorsque l’on saisit des caractères dans la zone prévue :

Démo et téléchargement du script sur le site officiel.

Lien :

• jQuery Plugin: LiveFilter