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 = Polandのところだけを見つけたいとします。したがって、最初の検索フィールドに「PLN」、2番目のフィールドに「Poland」と入力します。結果は、それらの特定のパラメータを含まないすべてのものをフィルタリングする必要があります。

以下は、私がオンラインのどこかで見つけた解決策です。それは通貨のみに従ってフィルタリングします。私は無駄に2つのフィルタを使用する方法を見つけることを試みた。

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