时间戳

首页 > 解决方案 > 用于 div 的 JQuery Live 过滤器

javascript - 用于 div 的 JQuery Live 过滤器

问题描述

我有包含标题和信息的 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>

标签： javascriptjquery

解决方案

您想h4在每个中搜索.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>

我之所以使用String#includeswithString#lowerCase是因为如果用户在正则表达式中输入具有特殊含义的字符，那么基于正则表达式的方法将失败，并且因为您的目标是进行简单的子字符串搜索，而这首先不需要正则表达式的功能。

推荐阅读