Créer un nouveau sélecteur jQuery pour rechercher dans le contenu HTML avec Javascript

Voici comment créer un nouveau sélecteur(selector) dans jQuery qui vous permettra de sélectionner des éléments qui contiennent le texte recherché. I s'agit d'un sélecteur semblable à :contains() mais il enlève les accents et ne tient pas compte de la casse.

//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
        }

      });

    }

  });

});