使 jquery ：包含接受多个值

Question

我有一个简单的实时搜索过滤器，运行如下：

jQuery.expr[':'].Contains = function(a,i,m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

var $section = $('section');
var $noresults = $('#noresults');

$noresults.hide();

$('#search').bind('keyup focus', function() {
    var input = $(this).val();

    if(input) {
        $section.hide();
        var result = $("section:Contains('"+input+"')");

        if(result.length) {
            $noresults.hide();
            result.show();
        }
        else {
            $noresults.show();
        }
    }
    else {
        $noresults.hide();
        $section.show();
    }
});

它工作正常，但我被要求让它接受多个值。使用此当前过滤器，如果我键入 "ABC"，则只会显示包含字符串 "ABC" 的部分。然而，如果我输入 "ABC DEF"，即使这两个字符串包含在文档的一个或多个部分中，也不会显示任何内容。

我想要获得的是一个过滤器，它只显示包含字符串 "ABC" 和 "DEF"在输入字段中输入“ABC DEF”。

我尝试了几个涉及拆分输入的解决方案，并提出了以下版本，但它不起作用。你能帮我让这个过滤器接受多个值吗？

$('#search').bind('keyup focus', function() {
    var input = $(this).val();

    var arr = input.split(/[ ,]+/);

    var len = arr.length;

    console.log(arr);
    console.log(len);

    for(var i=0; i<len; ++i) {  
        if(input) {
            $section.hide();

            var result = $("section:Contains('"+arr[i]+"')");

            if(result.length) {
                $noresults.hide();
                result.show();
            }
            else {
                $noresults.show();
            }
        }
        else {
            $noresults.hide();
            $section.show();
        }
    }
});

非常感谢您的帮助。

Answer 1

似乎无法从一个 ":contains" 方法 (http://forum.jquery.com/topic/how-to-get-contains-to-work-with-multiple-criteria) 中选择多个条件。

链接 :contains 方法将完成您想要实现的目标：

$('section:contains("ABC"):contains("DEF")');

您可以动态创建选择器，使其适用于可变长度的数组。

这是一个 jsfiddle，应该可以满足您的需求：http://jsfiddle.net/sKgpj/

Answer 2

• 缓存jQuery(a).text().toUpperCase()
• 按空格分割查询
• 遍历拆分查询，测试每个查询
• 如果发现不包含的查询成员，返回false
• 在循环结束时，返回 true

另外注意，如果你不想改变你的自定义选择器代码，你也可以写section:Contains('ABC'):Contains('DEF')。

编辑：翻译：

jQuery.expr[':'].Contains = function(a,i,m) { 
  var text = jQuery(a).text().toUpperCase();          // Cache `jQuery(a).text().toUpperCase()`
  var words = m[3].split(/\s+/);                      // Split query by whitespace
  for (var i = 0; i < words.length; i++) {            // Loop over the split query, testing each one
    if (-1 == text.indexOf(words[i].toUpperCase())) { // If you find a query member that is not contained,
      return false;                                   // return false
    }
  }
  return true;                                        // At loop end, return true
};