Mettre en œuvre une recherche Javascript rapide?

En gros:

  1. J'ai une page avec une zone de texte, et une liste <ul> ci-dessous. Le <ul> est rempli par une liste des amis de l'utilisateur.

  2. L'utilisateur commence à taper le nom d'un ami dans la zone de texte, par exemple en appuyant sur 'r'

  3. Je souhaite mettre immédiatement à jour le <ul> avec chaque touche pour afficher uniquement les amis dont les noms commencent par R, par exemple «Richard, Redmond, Raheem», etc.

  4. À mesure que l'utilisateur tape plus, je souhaite restreindre davantage les noms, par exemple si les types d'utilisateur 'Ri' puis je ne veux que 'Richard' dans la liste.

Je cherche des idées sur la façon de mettre en œuvre la recherche. Plus précisément, si je devais utiliser une classe Array ou JSON pour stocker la liste des amis, s'il y a une expression régulière que je devrais utiliser, etc.?

Aussi, quel événement jQuery dois-je utiliser pour écouter les événements de pression de touche?

Exemple de travail: http://jsfiddle.net/peeter/gAAth/

C'est comme ça que je le ferais, je ne reproduirai pas les données dans un tableau.

Une version optimisée fournit par Raynos: http://jsfiddle.net/gAAth/12/

Exemple

Une autre option basée sur le code @Peter.

HTML:

 <input type="text" id="input1"/> <ul id="list"> <li>Rich</li> <li>Rajim</li> <li>Andres</li> <li>Jorge</li> <li>Pedro</li> ... <li>Raul</li> <li>Paula</li> <li>Delfina</li> </ul> 

CSS:

 li.h {display:none;} 

JS:

Sélecteur de contenu

 $.extend($.expr[':'], { 'containsi': function(elem, i, match, array) { return (elem.textContent || elem.innerText || '').toLowerCase() .indexOf((match[3] || "").toLowerCase()) >= 0; } }); // first option $("#input1").keyup(function() { var search = $(this).val().toLowerCase(); $._list = ($._list) ? $._list : $("#list li"); //cache $._list .removeClass("h") .filter(":not(:containsi('"+search+"'))").addClass("h"); }); 

MODIFIER

Je pense un peu dans le code écrit, j'aime l'option de cacher d'abord et ensuite de l'afficher.

Exemple

JS:

 // second option $("#input1").keyup(function() { var search = $(this).val().toLowerCase(); $._list = ($._list) ? $._list : $("#list li"); $._list .addClass(function(index, currentClass) { var addedClass; if (currentClass !== "h" ) addedClass = "h"; return addedClass; }).filter(":containsi('"+search+"')").removeClass("h"); }); // third opcion $("#input1").keyup(function() { var search = $(this).val().toLowerCase(); $._list = ($._list) ? $._list : $("#list li"); $._list .hide() .filter(":containsi('"+search+"')").show(); });