jQuery：如何在文本搜索中仅显示DOM的特定元素

Question

我正在研究文本搜索功能，并且只想显示DOM的特定元素：当用户键入搜索词时，仅应显示具有class ='accordion'的div及其子代，孙子代等，包括他们孙子文本中的搜索字词。 我尝试了以下操作，结果是，每当输入搜索词时都不会显示任何元素。

 $('#search-criteria').on('keyup', function() {
    var g = $(this).val().toLowerCase();
    $('.panel-info').each(function() {
        var s = $(this).text().toLowerCase();

       if (s.indexOf(g) !== -1) {

        $(this).parentsUntil('.accordion').show();
        $(this).parentsUntil('.accordion').addClass('sh');
       }
       else if ($(this).hasClass('sh') === false && (s.indexOf(g) === -1)) 
       {
        $(this).parentsUntil('.accordion').hide();
       }

    });
});

在我也尝试过使用它代替if / else之前，它似乎更优雅，但也没有用：

$(this).parentsUntil('.accordion')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ]();  

请在这里找到小提琴jsfiddle.net/2vvwZ

Answer 1

使用jQuery的[ :contains选择器] [1]选择与您的搜索条件匹配的节点并显示它们，然后隐藏其余的节点。

假设您要搜索.accordion类的元素并显示或隐藏它们，请执行以下操作：

$('#search-criteria').on('change', function() {
  var val = $(this).val();
  $('.accordion').find(':contains(' + val + ')').show();
  $('.accordion').find(':not(:contains(' + val + '))').hide();
}).on('keyup', function() {
  $(this).change();
});

该代码段基本上找到了具有accordion类的所有元素， find contains输入值的子元素，然后对它们进行show() 。 之后，它执行相同的操作，但find not contains输入的s元素，并对其进行hide() 。

不幸的是，jQuery附带的选择器区分大小写。 如果您希望代码不区分大小写，则可以创建自己的选择器，如下所示：

$.expr[":"].icontains = $.expr.createPseudo(function(arg) {
  return function (elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

在这里，我创建了一个名为icontains的选择器，该选择器在比较字符串之前将字符串转换为大写。 如果要使用icontains请记住更改上面示例中的两个contains 。