JQuery Live filter for div

user_15671888 0
Viewed 85

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>

jquery javascript
1 Answers

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.

Tomalak_187710
Related