DevZone – Zone de développement web

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 :

<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>

Lorsqu’on applique le script :

<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>

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