QuickSearch, une recherche dans le contenu HTML avec jQuery

Un plugin que j’attendais depuis longtemps ! Il s’agit d’un plugin pour jQuery qui vous permet de chercher dans le contenu HTML d’une liste ou d’un tableau sans passer par l’AJAX. Ce qui augmente la rapidité de cette recherche.

Son utilisation est vraiment des plus simple et voici un cours exemple d’utilisation avec une liste HTML :

Préparation du HTML :

Il faut d’abords penser à inclure les javascripts comme cela :

Pour télécharger le contenu de QuickSearch, il vous suffit d’aller sur le site du plugin.

Et ensuite préparer votre liste de cette façon :

Afghanistan
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua and Barbuda
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan

Préparation du Javascript :

$(document).ready(function(){
	$('ul#list_example li').quicksearch({
		position: 'before', // la position du formulaire qui va être généré
		attached: 'ul#list_example', // l'élément à mettre à jour
		inputText: 'Recherche', // le contenu du champ de recherche
		labelText: 'Votre ville', // le label du champ de recherche
		loaderImg: 'loader.gif', // l'image de chargement
		loaderText: 'Recherche...' // le texte de chargement
	});
});

Avec ce simple code, vous pouvez générer un champ de recherche très rapide dans votre HTML et ainsi éviter de passer par l’AJAX qui prend beaucoup de ressources si il est mal utilisé !

Démonstration : jQuery QuickSearch 

---

Article original écrit par Clément JOBEILI et publié sur Dator Blog | © Dator.fr - 2008

QuickSearch, une recherche dans le contenu HTML avec jQuery