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

我正在开发一个文本搜索功能，只想显示DOM的特定元素：当用户键入搜索词时，只应显示带有class='accordion'的div以及他们的子女、孙子孙女等，这些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，而不是if/else，它看起来更优雅，但也不起作用：

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

---

请在此处找到fiddle

使用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

s包含

输入值的子元素，并
show（）
s这些元素。之后，它会执行相同的操作，但
查找
不包含
的
元素
包含
输入，并
隐藏（）

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

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

在这里，我创建了一个名为
icontains
的选择器，它在比较字符串之前将字符串转换为大写。如果你想使用
icontains
的话，请记住更改上面示例中的两个
包含的内容。对你的内容进行修改会使操作更容易。这是一个可以使用的小提琴谢谢你的帮助，Daniel。这看起来像我想要的，但对我来说不起作用。Daniel，我做了一些测试，如果我包括你的代码，它似乎会在早期执行，那时还没有任何元素。我尝试了document.ready和window.onload，并将代码移到了正文的底部，但没有改变行为。有什么线索吗？手风琴的内容是由对服务器的异步请求生成的吗？如果是这样，您必须将代码添加到回调中。很有趣，谢谢。不幸的是，它似乎不起作用，请参见@Blitz抱歉，该示例有一些错误，我没有正确阅读您的代码以理解其结构。我已经更新了这个例子，希望这是你想要的。谢谢。它仍然不起作用，我补充道。当我在我的代码中运行它时，在我输入大约三个字母后，它没有找到任何东西（即使这个单词会被包含在内）。最终结果应该只显示包含搜索词的整个面板的一致性。如果你愿意帮忙，请看一下小提琴。我已经更新了这个例子。如果它不适合你的需要100%你应该能够适应它。感谢你进一步研究这个问题。在此期间，我与Daniels solution合作，并在此基础上构建了一些其他功能，因此无法再进行测试。了解包含选择器仍然非常有帮助。一旦我被允许，我会投赞成票。