使用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

在執行前轉義正則表達式 ：

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

但是，您只是在對字符串中的字符串進行不區分大小寫的搜索。 您不需要為此使用正則表達式。 @mkoryak的答案更適合您IMO。

我曾經說過jQuery的內置contains psuedo選擇器非常適合您，但它區分大小寫。

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