Filtrer une liste basée sur l'entrée de l'utilisateur avec jQuery

Question

J'ai une liste de chansons, et je veux que les utilisateurs puissent les filtrer en tapant dans un champ de texte. Voici ce que je fais maintenant:

$("#filter_song_list").keyup(function() { 
    var filter = new RegExp($(this).val(), "i"); 

    $("ul.song_list a").each(function(){ 
     if (!$(this).text().match(filter)) { 
     $(this).hide(); 
     } else { 
     $(this).show(); 
     } 
    }); 
    }); 

1. Est-ce la bonne approche? Puisque j'interprète l'entrée de l'utilisateur comme une expression régulière, il ne peut pas rechercher des chansons avec (disons) une période dans le titre sans d'abord l'échapper ("."). Comment puis-je résoudre ce problème tout en conservant l'insensibilité à la casse de la recherche?

Answer 1

la meilleure façon de faire ce que vous demandez (pas mieux en termes de performances alors votre solution) est:

changement de filtre pour être l'entrée utilisateur, et non une expression régulière.

changement de la ligne de filtrage:

if ($(this).text().toLowerCase().indexOf($.trim(filter.toLowerCase())) > -1) { 

Answer 2

Escape your regex prior to executing it:

var pattern = $(this).val().replace(/([.*+?^${}()|[\]\/\\])/g, '\\$1'); 
var filter = new RegExp(pattern , "i"); 

Cependant vous faites juste une recherche insensible à la casse pour une chaîne dans une chaîne. Vous n'avez pas besoin d'expressions régulières pour cela. @mkoryak's answer est plus approprié pour vous IMO.

J'aurais dit que le built-in contains psuedo selector de jQuery était parfait pour vous, mais il est sensible à la casse.

Answer 3

Tout d'abord, faire une référence en cache à vos éléments pour accélérer les choses:

var cache = $("ul.song_list a"); 

Ensuite, faire un simple match de chaîne, en utilisant la fonction jQuery filter() et hide() éléments appariés:

cache.filter(function() 
{ 
    return $(this).text().toLower().indexOf(<value from input>) < 1; 
}).hide(); 

L'extrait final de code:

$(function() 
{ 
    var cache = $("ul.song_list a"); 

    $("#filter_song_list").keyup(function() 
    { 
     var val = $(this).val(); 

     cache.filter(function() 
     { 
      return $(this).text().toLower().indexOf(val) < 1; 
     }) 
     .hide(); 
    }); 
});