Javascript 将选择框集成到MixItUp JS时出现问题
几年前,我创建了一个网站,将MixitupJS合并到内容过滤器部分。最近有人要求我将一个选择框集成到过滤器中,但我在让脚本同时使用输入框和选择框时遇到了一个问题。我可以制作一个脚本,在其中一个上进行过滤,我可以制作一个可以使用两个选择框的脚本,但我恐怕对JS还是比较陌生,我似乎无法修改脚本来支持输入框和选择框 所需的行为将是这样的:输入值将用于筛选标题(与当前一样),选择框可用于筛选同一实例中的标记 我使用的原始脚本是根据博客上的一个示例修改的,但我无法找到它的源代码,因为地址显然已被弃用。如果有人认出了它,请在下面发布消息来源 我在下面的链接上发布了一些简化版本: 当前版本(工作版): 带有标记选择的版本(不工作): HTML:Javascript 将选择框集成到MixItUp JS时出现问题,javascript,jquery,mixitup,Javascript,Jquery,Mixitup,几年前,我创建了一个网站,将MixitupJS合并到内容过滤器部分。最近有人要求我将一个选择框集成到过滤器中,但我在让脚本同时使用输入框和选择框时遇到了一个问题。我可以制作一个脚本,在其中一个上进行过滤,我可以制作一个可以使用两个选择框的脚本,但我恐怕对JS还是比较陌生,我似乎无法修改脚本来支持输入框和选择框 所需的行为将是这样的:输入值将用于筛选标题(与当前一样),选择框可用于筛选同一实例中的标记 我使用的原始脚本是根据博客上的一个示例修改的,但我无法找到它的源代码,因为地址显然已被弃用。如果
我把问题解决了。在我用谷歌搜索了一下这个问题之后,我在代码笔上看到了一个帖子,它为我的问题提供了一个解决方案 您可以在此处看到所述笔的名称: 这似乎是patrickkunka原笔的一个分支:
<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>
$(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 );
});
})
;)