Jquery/Javascript 正则表达式：过滤器，允许输入多个标签以选择该类别，jsfiddle

Question

http://jsfiddle.net/nicktheandroid/AtkNW/

我们的目标是获取文本框的值，其中包含多个关键字，用空格分隔，然后过滤列表以显示包含所有这些关键字的项目。现在，我只能输入<span class="tags"> 中列出的那些关键字。

我希望能够输入它们，但不按顺序输入，并且仍然只保留具有所有这些关键字的项目作为可见项目。我想我可能不得不在这里的某个地方使用.split(" ")...嗯...

<li>entertainment
    <span class="tags">tv radio dance opera</span>      
</li>

jquery：

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    var length = $(this).val().length;
    if (length > 1) {
        $(".filtered li").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).addClass("hidden");
            } else {
                $(this).removeClass("hidden");
                count++;
            }
        });
    } else {
        $('.filtered li').removeClass("hidden")
            count++;
    }
    $("#filter-count").text(count);
});

有谁知道如何做到这一点？

Answer 1

正如您所怀疑的，您需要使用 String.split() 来拆分用户输入，并将单词与您的标签一一匹配。

修改代码为：

$("#filter").keyup(function() {
    var filter = $(this).val(),
        count = 0;
    var length = $(this).val().length;
    if (length > 1) {
        var filter_tags = filter.split(" "); // Split user input by spaces
        $(".filtered li").each(function() {
            var $this = $(this);
            var matches = true;
            // Match each splitted string against the whole tags string
            $.each(filter_tags, function(i, a_filter) {  
                if ($this.text().indexOf(a_filter) === -1) {
                    matches = false;
                }
            });
            if (matches) {
                $this.removeClass("hidden");
                count++;
            } else {
                $this.addClass("hidden");
            }
        });        
    } else {
        $('.filtered li').removeClass("hidden")
        count++;
    }

    $("#filter-count").text(count);
});

您可能需要将智能正则表达式传递给拆分，以允许空格和逗号作为分隔符。

http://jsfiddle.net/AtkNW/31/ 的工作示例