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

这是正确的方法吗？
由于我将用户的输入解释为正则表达式，因此他无法在没有首先转义（“。”）的情况下搜索标题中具有（例如）句点的歌曲。如何在保持搜索不区分大小写的同时解决这个问题？

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

使用jQuery基于用户输入过滤列表

3 个答案: