Magazine Internet

QuickSearch, une recherche dans le contenu HTML avec jQuery

Publié le 24 octobre 2008 par Dator

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


Retour à La Une de Logo Paperblog

A propos de l’auteur


Dator 51 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog