Jquery search not working properly in accordion?

Question

Here if search text matches the text of <a> tag I want to hide other unmatched items.

Here what is happening is if the searched input does not match any thing then only the accordion disappears otherwise nothing happens.

I want to display only the accordion which matches the searched text and hide unmatched.How can I do it here?

script

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

Your html structure are missing some tags. Then you can iterate through your [data-toggle] element and if match found hide closest card from that elements.

Demo Code :

 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

This should be easy. its a little mistake that you did.

 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>