jQuery로 사용자 입력을 기반으로 목록 필터링

Question

노래 목록이 있으며 사용자가 텍스트 필드에 입력하여 필터링 할 수 있기를 바랍니다. 여기에 내가 지금 뭘하는지입니다 :

$("#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. 이 올바른 접근 방식인가?
2. 사용자의 입력을 정규 표현식으로 해석하기 때문에 제목에서 마침표 (".")없이 노래를 검색 할 수 없습니다. 검색의 대소 문자를 구분하지 않으면 서이 문제를 어떻게 해결할 수 있습니까?

Answer 1

당신이 (안 더 좋은 성능을 다음 솔루션의 측면에서) 요청 일을 할 수있는 가장 쉬운 방법은 다음과 같습니다

변경 필터는 사용자 입력이 아닌 정규식이 될 수 있습니다.

변화 필터링 라인 :

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"); 

. 이를 위해 정규식이 필요하지 않습니다. @mkoryak's answer 당신에게 더 적합합니다 IMO.

나는 jQuery의 built-in contains psuedo selector이 완벽하다고 말했을 것이지만, 대소 문자를 구분합니다.

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

는 그 다음 jQuery를 filter() 기능을 사용하여, 단순한 문자열 일치를 수행하고 hide() 일치하는 요소 : 모든

Answer 3

첫째, 일을 빠르게하기 위해 요소에 대한 캐시 참조 할

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

코드의

마지막 조각 :

$(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(); 
    }); 
});