Question

我正在玩jQuery Isotope并希望实现元素搜索。当用户键入文本框时，我更改过滤器选项，如下所示：

var newFilter = '[data-myAttr*="' + $('#mySearchBox').val() + '"]';
$('#myIsotopeContainer').isotope({filter: newFilter});

我正在使用jQuery的attribute contains selector。但它区分大小写，我希望在敏感的情况下是。我怎么能做到这一点？

我已经查看过使用.filter(fn)建议的其他问题和Google搜索结果，但我对同位素的控制并不多。我只是给它一个选择器。

Answer 1

从查看Isotope的来源，您应该能够传递一个函数，如下所示：

$('#myIsotopeContainer').isotope({ filter: function() {
        // case-insensitive pattern match:
        var pattern=new RegExp($('#mySearchBox').val(),'i');

        // test against 'data-myAttr':
        return pattern.test(this.attr('data-myAttr'));
    }
});

同位素只需要.filter()调用就可以进行自己的过滤。试一试，看看会发生什么。

Answer 2

使用小写作为所有属性的协议，然后将用户输入更改为小写

Answer 3

对于像我这样的人来说，我想给出一个与这个问题相关的答案。我想搜索整个元素（或元素的任何子元素）中的任何文本，而不仅仅是属性。如果您使用：contains选择器并希望它不区分大小写，则应按照this bug report中的概述扩展JQuery。为方便起见，我发布了以下代码：

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

现在您可以像使用JQuery一样使用：contains（'SomeString'）但现在使用新的扩展：containsi（'SomeString'）

如何使用jQuery选择器过滤jQuery同位素项不区分大小写（搜索）

3 个答案: