同位素文本搜索和.class过滤

时间:2015-12-03 12:36:47

标签: javascript isotope

我无法使用同位素组合下拉类过滤器和文本搜索过滤器。我可以将下拉组合作为一个组或名称搜索,但我不确定如何让它们一起工作。

现在正在工作

<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但我不明白为什么我的工作不起作用。

由于

0 个答案:

没有答案