Jquery 搜索在手風琴中無法正常工作？

Question

在這里，如果搜索文本與<a> tag的文本匹配，我想隱藏其他不匹配的項目。

這里發生的情況是，如果搜索到的輸入不匹配任何東西，那么只有手風琴消失，否則什么也不會發生。

我只想顯示與搜索文本匹配的手風琴並隱藏不匹配的內容。我該怎么做？

腳本

jQuery("#query").keyup(function () {
    var filter = jQuery(this).val();
    jQuery("#accordion").each(function () {
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).hide();
        } else {
            jQuery(this).show()
        }
    });
});

html

<input type="text" id="query" >

   <div class="crollable">
      <div id="accordion">
         <div class="card">   
             <div class="card-header">
                <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
               </div>
            <div id="collapse1" class="collapse" data-parent="#accordion">
           <div class="card-body">
          <div class="col-3">value</div>
          </div>

         <div class="card">   
             <div class="card-header">
                <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
               </div>
            <div id="collapse2" class="collapse" data-parent="#accordion">
           <div class="card-body">
          <div class="col-3">value2</div>
          </div>
        </div>

Answer 1

您的html結構缺少一些標簽。 然后您可以遍歷您的[data-toggle]元素，如果找到匹配項，則從該元素中隱藏closest卡片。

演示代碼：

 jQuery("#query").keyup(function() { var filter = jQuery(this).val().toLowerCase(); //get text //loop through `a` tag jQuery("#accordion [data-toggle]").each(function() { if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) { jQuery(this).closest(".card").hide(); //hide closest card } else { jQuery(this).closest(".card").show() } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <input type="text" id="query"> <div class="crollable"> <div id="accordion"> <div class="card"> <div class="card-header"> <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a> </div> <div id="collapse1" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value</div> </div> </div> </div> <div class="card"> <div class="card-header"> <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a> </div> <div id="collapse2" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value2</div> </div> </div> </div> </div> </div>

Answer 2

這應該很容易。 這是你做的一個小錯誤。

 jQuery("#query").keyup(function () { var filter = jQuery(this).val().toLowerCase(); // Search function return 0 when it dose not find anything. // and the Regexp should be using g instead of i so the problem with casesensetive should be solved. jQuery("#accordion.card-body.col-3").each(function () { var text = jQuery(this).text().toLowerCase(); if (text.indexOf(filter) == -1) { jQuery(this).hide(); } else { jQuery(this).show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="query" > <div class="crollable"> <div id="accordion"> <div class="card"> <div class="card-header"> <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a> </div> <div id="collapse1" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value</div> </div> <div class="card"> <div class="card-header"> <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a> </div> <div id="collapse2" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value2</div> </div> </div>