使用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對你來說是完美的，但它是區分大小寫的。

Answer 3

首先，做一個緩存參考你的元素，以加快速度：

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

然後做一個簡單的字符串匹配，使用jQuery filter()功能，hide()匹配的元素：

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