jQuery搜索標題和內容與手風琴

我想用手風琴對標題和描述或內容進行實時搜索。我看過這篇文章如何使用 JS 搜索嵌套手風琴，看看它是否有幫助，我已經嘗試過了，它作業正常。

問題是我不認為它尋找標題，它只尋找描述。我想看看它的標題和描述。

HTML

<input type="text" placeholder="Search Keyword Info" class="input-search" id="search-qa">

<div class="container">
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> Where is Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Qweeee not a description.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> What is a Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Lorem Ips</p>
        </div>
      </div>
    </div>
  </div>
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> Who is Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Dolor it</p>
        </div>
      </div>
    </div>
  </div>
</div>

JS

$("#search-qa").on('keyup', function() {

  let searchText = $(this).val().toLowerCase();

  $(".collapse *").each(function() {
  
    let text = $(this).immediateText().toLowerCase();

    if (text.indexOf(searchText) == -1) {
      $(this).parents('.collapse').addClass('hidden');
    }
    else {
      $(this).parents('.collapse').removeClass('hidden');
    }
  });

});

$.fn.immediateText = function() {
  return this.contents().not(this.children()).text();
};

小提琴：https : //jsfiddle.net/idonthaveagirlfriend/3con2p4x/13/

謝謝您的幫助！

uj5u.com熱心網友回復：

邏輯已經在每個可折疊部分的標題和描述中進行搜索。

問題是由于您hidden在回圈的每次迭代中通過子元素添加或洗掉類。因此，您可以在一個孩子中找到匹配項時洗掉該類，但是當下一個孩子中沒有匹配項時，添加該類以再次隱藏父項。

要解決此問題，您可以修改邏輯，以便在搜索開始之前隱藏所有內容，僅在回圈中找到匹配項時取消隱藏。試試這個：

jQuery($ => {
  $("#search-qa").on('keyup', function() {
    let searchText = $(this).val().toLowerCase().trim();
    $('.collapse').addClass('hidden', searchText.length > 0); // hide all elements when a search starts

    $(".collapse *").each(function() {
      let $child = $(this);
      let $collapse = $child.closest('.collapse');
      let text = $child.immediateText().toLowerCase().trim();

      if (text.indexOf(searchText) !== -1)
        $collapse.removeClass('hidden'); // show the current collapse container when a match is found
    });
  });
})

$.fn.immediateText = function() {
  return this.contents().not(this.children()).text();
};

.collapse {
  border: 1px solid currentColor;
  margin: 10px 0;
  -webkit-transition: background 0.2s ease-in;
  -moz-transition: background 0.2s ease-in;
  -o-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}

.collapse__head {
  font-size: 20px;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}

.collapse__body {
  max-height: 0;
  overflow: hidden;
  transition: all 300ms ease;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" placeholder="Search Keyword Info" class="input-search" id="search-qa">

<div class="container">
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> Where is Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Qweeee not a description.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> What is a Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Lorem Ips</p>
        </div>
      </div>
    </div>
  </div>
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> Who is Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Dolor it</p>
        </div>
      </div>
    </div>
  </div>
</div>

標籤：

上一篇：jquery生成的元素內的Laravel語法

下一篇：使用for回圈時JS追加不起作用