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 。