20 janvier 2010

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

jQuery Plugin : LiveFilter, proposer un filtre sur les données dune listeVoici 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 :
jQuery Plugin : LiveFilter, proposer un filtre sur les données dune liste

Et lorsque l’on saisit des caractères dans la zone prévue :
jQuery Plugin : LiveFilter, proposer un filtre sur les données dune liste

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

Lien :

BlogBang

Aucun commentaire

Soyez le premier à commenter cet article !

Déposez un commentaire





Additional comments powered by BackType