Question

我正在研究文本搜索功能，并且只想显示DOM的特定元素：当用户键入搜索词时，只有div ='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 s元素，contains hide()输入和$.expr[":"].icontains = $.expr.createPseudo(function(arg) { return function (elem) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); s。

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

icontains

这里我创建了一个名为contains的选择器，它在比较它们之前将字符串转换为大写。如果您想使用icontains，请务必更改上述示例中的两个{{1}}。

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

1 个答案: