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”，在第二个字段输入“Poland”。结果应该过滤掉所有不包含这些特定参数的内容。

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

// 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

我会这样做：

＆＃13;

$('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');

＆＃13;

<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>

＆＃13;

Javascript：多个过滤器和多个div

2 个答案: