无法将 select 框集成到 MixItUp JS

Question

几年前，我制作了一个将 MixItUp JS 合并到内容过滤器部分的网站。我最近被要求将一个选择框集成到过滤器中，但我在让脚本同时使用输入框和选择框时遇到了问题。我可以制作一个脚本来过滤一个或另一个，我可以制作一个可以使用两个选择框的脚本，但恐怕我对 JS 还是比较陌生，而且我似乎无法修改脚本兑现输入框和选择框。

理想的行为是输入值将用于过滤标题（正如目前所做的那样），并且选择框可用于在同一实例中过滤标签。

我使用的原始脚本是根据博客上的示例修改的，但我无法找到源代码，因为该地址显然已被弃用。如果有人认识它，请post下面的来源。

我在下面的链接中post编辑了一些简化版本：

当前版本（工作）：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 );
});

})

Answer 1

我解决了这个问题。在我用谷歌搜索这个问题后，我在代码笔上遇到了一个 post，它为我的问题提供了解决方案。

你可以在这里看到提到的笔：http://codepen.io/anon/pen/yJgQWB

这似乎是 patrickkunka 的原笔的分支：https://codepen.io/patrickkunka/pen/iwcap

;)

无法将 select 框集成到 MixItUp JS

Trouble integrating a select box into MixItUp JS

javascript

jquery

mixitup