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

make jquery：包含接受多个值

2 个答案: