Javascript：多个过滤器和多个 div

Question

我有一个容器内多个 div 的列表：

<div class='platform'>
    <div class='pldatawrcurrencies'>
        <div class='platform-data'>DKK, USD, CZK</div>
    </div>
    <div class='pldatawrissuesloanscountry'>
        <div class='platform-data'>UK, US, France</div>
    </div>
</div>
<div class='platform'>
    <div class='pldatawrcurrencies'>
        <div class='platform-data'>EUR, USD, PLN</div>
    </div>
    <div class='pldatawrissuesloanscountry'>
        <div class='platform-data'>Germany, Denmark, France</div>
    </div>
</div>
<div class='platform'>
    <div class='pldatawrcurrencies'>
        <div class='platform-data'>SEK, GBP, PLN</div>
    </div>
    <div class='pldatawrissuesloanscountry'>
        <div class='platform-data'>Poland, UK, Spain</div>
    </div>
</div>

<div id="CLP">
    <div>Enter desired currency: 
        <input type='text' id='currencies' placeholder='Search Text'>
    </div>
    <div>Enter desired country: 
        <input type='text' id='countries' placeholder='Search Text'>
    </div>
</div>

我希望允许访问者根据货币和/或国家/地区过滤平台。但是我对 JS 很陌生，找不到合适的解决方案。

假设您要查找 pldatawrcurrencies = PLN 但仅在 pldatawrissuesloanscountry = 波兰的情况下，我在第一个搜索字段中输入“PLN”，在第二个字段中输入“波兰”。结果应该过滤掉不包含这些特定参数的所有内容。

以下是我在网上某处找到并进行了调整的解决方案。它仅根据货币进行过滤。我已经尝试找到一种使用两个过滤器的方法，但无济于事。

// Search function
var search = ('#currencies');
$(document).ready(function(){
    searchNow(search);
});

function searchNow(searchKey) {
 $(searchKey).keyup(function(){

  // Search text
  var text = $(this).val();

  // Hide all content class element
  $('.platform').hide();

  // Search and show
  $('.platform .pldatawrcurrencies:contains("'+text+'")').closest('.platform').show();

 });
}

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function( elem ) {
   return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

Answer 1

如果我理解正确，您已经非常接近它了！只需为每个“可搜索”字段添加一个类

<div class='platform'>
    <div class='pldatawrcurrencies search-me'>
        <div class='platform-data'>DKK, USD, CZK</div>
    </div>
    <div class='pldatawrissuesloanscountry search-me'>
        <div class='platform-data'>UK, US, France</div>
    </div>
</div>
<div class='platform'>
    <div class='pldatawrcurrencies search-me'>
        <div class='platform-data'>EUR, USD, PLN</div>
    </div>
    <div class='pldatawrissuesloanscountry search-me'>
        <div class='platform-data'>Germany, Denmark, France</div>
    </div>
</div>
<div class='platform'>
    <div class='pldatawrcurrencies search-me'>
        <div class='platform-data'>SEK, GBP, PLN</div>
    </div>
    <div class='pldatawrissuesloanscountry search-me'>
        <div class='platform-data'>Poland, UK, Spain</div>
    </div>
</div>

还有脚本：

// Search function
var search = ('#currencies');
$(document).ready(function(){
    searchNow(search);
});

function searchNow(searchKey) {
 $(searchKey).keyup(function(){

  // Search text
  var text = $(this).val();

  // Hide all content class element
  $('.platform').hide();

  // Search and show
  $('.platform .search-me:contains("'+text+'")').closest('.platform').show();

 });
}

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function( elem ) {
   return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

这样，您可以添加更多可搜索或不可搜索的div。我希望这会有所帮助！

Answer 2

我会这样做：

$('input').on('input', function () {
    var currency = $('#currencies').val().toLowerCase().replace(/,/g, ''); // exclude commas
    var country = $('#countries').val().toLowerCase().replace(/,/g, '');
    $('.platform').hide().filter(function () {                    
        return $('.pldatawrcurrencies', this).text().toLowerCase().indexOf(currency) > -1
            && $('.pldatawrissuesloanscountry', this).text().toLowerCase().indexOf(country) > -1
    }).show();
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CLP">
    <div>Enter desired currency: 
        <input type='text' id='currencies' placeholder='Search Text'>
    </div>
    <div>Enter desired country: 
        <input type='text' id='countries' placeholder='Search Text'>
    </div>
</div>

<div class='platform'>
    <div class='pldatawrcurrencies'>
        <div class='platform-data'>DKK, USD, CZK</div>
    </div>
    <div class='pldatawrissuesloanscountry'>
        <div class='platform-data'>UK, US, France</div>
    </div>
</div>
<div class='platform'>
    <div class='pldatawrcurrencies'>
        <div class='platform-data'>EUR, USD, PLN</div>
    </div>
    <div class='pldatawrissuesloanscountry'>
        <div class='platform-data'>Germany, Denmark, France</div>
    </div>
</div>
<div class='platform'>
    <div class='pldatawrcurrencies'>
        <div class='platform-data'>SEK, GBP, PLN</div>
    </div>
    <div class='pldatawrissuesloanscountry'>
        <div class='platform-data'>Poland, UK, Spain</div>
    </div>
</div>