JQuery div 实时过滤器

Question

I have div blocks which contain title and information. I have a script which works and search but for all information. I need my search works only for title. I think about maybe make some filter for search by .overlay-cls and h4

My script:

 jQuery("#country_search").keyup(function() { var filter = jQuery(this).val(); jQuery('.country-grid div').each(function() { if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) { jQuery(this).hide(); jQuery('.country-info').show(); } else { jQuery(this).show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search"> <input placeholder="Search Country" type="text" id="country_search" class="find_country"> </div> <div class="country-box search"> <div class="post_thumbnail" style="background-image: url('')"> <div class="overlay-cls"> <h4>Afghanistan</h4> </div> </div> <div class="country-info"> <span class="countValuete"> <span>Valuete</span> <strong>Afghan Afghani (AFN)</strong> </span> <span class="countrypay"> <span>Work Week</span> <strong>40 hours</strong> </span> <span class="countrytaxes"> <span>Employer Taxes</span> <strong>10% - 20%</strong> </span> </div> </div> <div class="country-box search"> <div class="post_thumbnail" style="background-image:url('')"> <div class="overlay-cls"> <h4>Albania</h4> </div> </div> <div class="country-info"> <span class="countValuete"> <span>Valuete</span> <strong>Albanian Lek (ALL)</strong> </span> <span class="countrypay"> <span>Work Week</span> <strong>20 hours</strong> </span> <span class="countrytaxes"> <span>Employer Taxes</span> <strong>16.7%</strong> </span> </div> </div> <div class="country-box search"> <div class="post_thumbnail" style="background-image:url('')"> <div class="overlay-cls"> <h4>Algeria</h4> </div> </div> <div class="country-info"> <span class="countValuete"> <span>Valuete</span> <strong>Algerian Dinar (DZD)</strong> </span> <span class="countrypay"> <span>Work Week</span> <strong>40 hours</strong> </span> <span class="countrytaxes"> <span>Employer Taxes</span> <strong>up to 26%</strong> </span> </div> </div>

Answer 1

You want to search the h4 in each .country-box :

 $("#country_search").keyup(function () { var filter = $(this).val().trim().toLowerCase(); $('.country-box.search').each(function () { if ($(this).find("h4").text().toLowerCase().includes(filter)) { $(this).show(); } else { $(this).hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search"> <input placeholder="Search Country" type="text" id="country_search" class="find_country"> </div> <div class="country-box search"> <div class="post_thumbnail" style="background-image: url('')"> <div class="overlay-cls"> <h4>Afghanistan</h4> </div> </div> <div class="country-info"> <span class="countValuete"> <span>Valuete</span> <strong>Afghan Afghani (AFN)</strong> </span> <span class="countrypay"> <span>Work Week</span> <strong>40 hours</strong> </span> <span class="countrytaxes"> <span>Employer Taxes</span> <strong>10% - 20%</strong> </span> </div> </div> <div class="country-box search"> <div class="post_thumbnail" style="background-image:url('')"> <div class="overlay-cls"> <h4>Albania</h4> </div> </div> <div class="country-info"> <span class="countValuete"> <span>Valuete</span> <strong>Albanian Lek (ALL)</strong> </span> <span class="countrypay"> <span>Work Week</span> <strong>20 hours</strong> </span> <span class="countrytaxes"> <span>Employer Taxes</span> <strong>16.7%</strong> </span> </div> </div> <div class="country-box search"> <div class="post_thumbnail" style="background-image:url('')"> <div class="overlay-cls"> <h4>Algeria</h4> </div> </div> <div class="country-info"> <span class="countValuete"> <span>Valuete</span> <strong>Algerian Dinar (DZD)</strong> </span> <span class="countrypay"> <span>Work Week</span> <strong>40 hours</strong> </span> <span class="countrytaxes"> <span>Employer Taxes</span> <strong>up to 26%</strong> </span> </div> </div>

I've used String#includes with String#lowerCase because your regex-based approach will fail if the user enters characters that have special meaning in regex, and because you're aiming for a simple substring search, which does not require the capabilities of regex in the first place.