0

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

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

非常感谢你的帮助。

4

2 回答 2

6

看起来不可能从一个“：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/

于 2013-02-04T02:47:32.193 回答
3
  • 缓存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
};
于 2013-02-04T02:43:39.180 回答