//Premièrement on ajoute une fonction à l'objet String pour pouvoir enlever les accents
String.prototype.noaccent = function() {
return this.replace(/[àâä]/gi,"a").replace(/[éèêë]/gi,"e").replace(/[îï]/gi,"i").replace(/[ôö]/gi,"o").replace(/[ùûü]/gi,"u");
};
//Ensuite on ajoute notre nouveau sélecteur :search() à l'objet jQuery
jQuery.extend(jQuery.expr[':'], {
'search' : function(a,i,m) {
var content = ((a.textContent || a.innerText || '') +'').noaccent();
var words = m[3].noaccent().split(" ");
for(var j = 0; j < words.length; j++) {
if(content.toLowerCase().indexOf( words[j].toLowerCase() ) >= 0) {
return true;
}
}
return false;
}
});
Voilà c'est fait! Vous pouvez maintenant l'utiliser de la façon suivante :
//Cet exemple ajoute la classe "found" à tous les éléments li qui contiennent le texte montreal, montréal, Montreal ou Montréal
$("ul li:search('montreal')").addClass("found");
Un autre exemple complet avec le HTML qui permet d'afficher seulement les éléments qui contienne le texte saisi dans un textBox.
Le HTML :
- Abercorn
- Acton Vale
- Adstock
- Aguanish
- Akulivik
- Akwesasne
- Albanel
- Albertville
- Alleyn-et-Cawood
- Alma
- Amherst
- Amos
- Amqui
- L'Ancienne-Lorette
- Ange-Gardien
- L'Ange-Gardien (La Côte-de-Beaupré)
- L'Ange-Gardien (Les Collines-de-l'Outaouais)
- Angliers
- L'Anse-Saint-Jean
- Armagh
- Arundel
- Asbestos
- L'Ascension
Et maintenant le javascript qui fait fonctionner le tout :
$(function() {
//On ajoute un événement au TextBox lorsqu'une touche est pressé
$("input.query").keyup(function() {
//On stocke le texte saisi dans une variable
var query = jQuery.trim($(this).val());
if(!query.length) {
$("ul.list li").show(); // S'il n'y a pas de texte saisie (ou seulement des espaces) on affiche tous les éléments li
} else {
//Sinon on fait une boucle qui passe à travers tous les éléments li
$("ul.list li").each(function() {
if( $(this).is(":search('"+query+"')") ) {
$(this).show(); //Si l'élément contient le texte on l'affiche
} else {
$(this).hide(); //On cache tous les autres
}
});
}
});
});
Messages
