我无法使用同位素组合下拉类过滤器和文本搜索过滤器。我可以将下拉组合作为一个组或名称搜索,但我不确定如何让它们一起工作。
现在正在工作
<script>
var filterValue = ""; //populated by changes to one of the drop downs
var searchRE; // populated on a keyup of the search box
jQuery( function(){
var $container = jQuery("#itemcon").isotope({
itemSelector: ".productGridItem",
filter: function(){
var $this = jQuery(this);
var searchResult = searchRE ? $this.text().match(searchRE):true;
var dropResult = filterValue ? $this.is(filterValue) :true; //THIS DOES NOT WORK - HOW DO I DO THIS BIT?
return searchResult && dropResult;
}
});
jQuery(".filteroptions select").change(function(){
//var filterValue = checkDropDowns(); // <-- ERROR IS HERE - redeclared the filterValue;
filterValue = checkDropDowns(); //WORKING
console.log("FilterValue:"+filterValue);
$container.isotope();
// IF I DO THIS, THE DROP DOWN CLASS FILTERS WORK
// $container.isotope({filter: filterValue});
});
jQuery("#filname").keyup(debounce(
function(){
var searchTerm = jQuery("#filname").val();
searchRE = new RegExp(searchTerm,"gi"); //i = case insensitve, g = global (keep going)
$container.isotope();
}
)
);
});
var checkDropDowns = function(){
$inputs = jQuery(".filteroptions select");
var values = [];
$inputs.each( function(i,elem){
if(elem.type ==="checkbox"){
value = elem.checked && elem.value;
}else{
value = elem.value;
console.log("Value: "+value);
}
if( value ){
values.push( value );
}
});
return values.join(""); // I join these so as to get an AND such as .classa.classb
}
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
</script>
作为参考,下拉列表都有类名作为值。 e.g。
<select id="dropdown1">
<option value=".classa">Class A</option>
<option value=".classb">Class B</option>
</select>
如何修改过滤器功能来处理搜索结果和dropResult? filterValue的值采用“.classa.classb”的形式。
我在这里看到了答案:Isotope Combination Filters, Search and Sorts, messy and not complete但我不明白为什么我的工作不起作用。
由于