JQuery div 實時過濾器

Question

我有包含標題和信息的 div 塊。 我有一個腳本可以工作和搜索，但可以搜索所有信息。 我需要我的搜索僅用於標題。 我想也許可以通過.overlay-cls和h4對搜索進行一些過濾

我的腳本：

 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

您想在每個.country-box搜索h4 ：

 $("#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>

我將String#includes與String#lowerCase一起使用，因為如果用戶在正則表達式中輸入具有特殊含義的字符，並且您的目標是簡單的 ZE83AED3DDF4667DEC0DAAAACB2BB3BE0BZ 搜索，則基於正則表達式的方法將失敗，這不需要以下功能首先是正則表達式。