選択ボックスからMixItUpへの混乱のトラブルJS

数年前、MixItUp JSをコンテンツフィルタセクションに組み込んだサイトを作った。私は最近、選択ボックスをフィルタに統合するよう求められましたが、入力ボックスと選択ボックスの両方を使用するスクリプトを取得する際に問題が発生しています。私は、どちらか一方でフィルタリングするスクリプトを作ることができます.2つの選択ボックスで動作するスクリプトを作ることもできますが、私はまだJSには比較的新しいので、スクリプトを変更できないようです入力ボックスおよび選択ボックスを尊重する。選択ボックスからMixItUpへの混乱のトラブルJS

入力値が（現在のように）タイトルのフィルタリングに使用され、選択ボックスが同じインスタンスのタグをフィルタリングするために使用されるような動作になります。

私が使用しているオリジナルのスクリプトは、ブログの例から変更されましたが、アドレスが明らかに推奨されなくなったため、ソースとして見つけることができませんでした。誰かがそれを認識したら、以下のソースを投稿してください。

私は以下のリンクでは、いくつかの簡易版を掲載しました：

現在のバージョン（ワーキング）：タグ選択（機能していない）とhttps://jsfiddle.net/ehayes/qtdj3ypq/

バージョン：https://jsfiddle.net/ehayes/t5jn1bwk/

HTML：

を

<div id="filterList"> 

<input id="filterInput" class="form-control" name="filter" placeholder="Filter..." value="" type="text"/> 

<select id="filterSelect" name="tag" class="select2"> 
    <option value="">All</option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
</select> 

<div id="filterContainer"> 

<div class="mix" style="width:100%;"> 
    <div class="title"> 
    <a href="#"><h3>Title 1</h3></a> 
    </div> 
    <p>Description for Title 1</p> 
    <div class="tags"> 
    <p>Tags: A, B</p> 
    </div> 
    <hr/> 
</div> 

<div class="mix" style="width:100%;"> 
    <div class="title"> 
    <a href="#"><h3>Title 2</h3></a> 
    </div> 
    <p>Description for Title 2</p> 
    <div class="tags"> 
    <p>Tags: B, C</p> 
    </div> 
    <hr/> 
</div> 

<div class="mix" style="width:100%;"> 
    <div class="title"> 
    <a href="#"><h3>Title 3</h3></a> 
    </div> 
    <p>Description for Title 3</p> 
    <div class="tags"> 
    <p>Tags: C, D</p> 
    </div> 
    <hr/> 
</div>

JS：

$(function(){ 

$("#filterList").mixItUp(); 

var inputText; 
var selectText; 
var $matching = $(); 

// Delay function 
var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

$("#filterInput").keyup(function(){ 
    // Delay function invoked to make sure user stopped typing 
    delay(function(){ 
     inputText = $("#filterInput").val().toLowerCase(); 
     selectText = $("#filterSelect").val().toLowerCase(); 

     // Check to see if input field is empty 
     if ((inputText.length) > 0 || (selectText.length) > 0) {    
      $('.mix').each(function() { 
       $this = $("this"); 

       //var filterString = $input.val() + $filterSelect.val(); 

       // add item to be filtered out if input text matches items inside the title 
       if($(this).children('.title' + '.tags').text().toLowerCase().match(inputText)) { 
        $matching = $matching.add(this); 
       } 
       else { 
        // removes any previously matched item 
        $matching = $matching.not(this); 
       } 
      }); 
      $("#filterList").mixItUp('filter', $matching); 
     } 

     else { 
      // resets the filter to show all item if input is empty 
      $("#filterList").mixItUp('filter', 'all'); 
     } 
    }, 200); 
}); 

})

ご協力いただきありがとうございます。

出典

2017-02-02 Imagesthataspire