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 :

%MINIFYHTMLbfe5245fb9c3e81d72b92e753b5441da13%%MINIFYHTMLbfe5245fb9c3e81d72b92e753b5441da14%

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