帶有列表js插件的多個過濾器

Question

我試圖用插件list.js爲產品列表創建多個過濾器，即我想通過顏色和項過濾列表，此時下面的代碼只是執行過濾紅色項目我如何更改它，以便如果用戶同時選擇顏色和項目，它是否正確過濾？

 <form id="filter"> 
     <select id ="colour" name="colour"> 
      <option value="0">All packages</option> 
     <option value="1">Red</option> 
     <option value="2" >Yellow</option> 
     <option value="3" >Green</option> 
    </select> 
    <select id ="items" name="items"> 
     <option value="0">All items</option> 
     <option value="1" >T-shirt</option> 
     <option value="2">Trousers</option> 
     <option value="3" >Jumper</option> 

    </select> 
</form> 

$('#filter-clothes').click(function() { 
     featureList.filter(function(item) { 
      if (item.values().colour == "Red") { 
       return true; 
      } else { 
       return false; 
      } 
     }); 
     return false; 
    }); 

Answer 1

在沒有看到HTML，或像values()其他功能你可能想

$('#filter-clothes').click(function() { 
     var color=$('#colour').val(), itemVal=$('#items').val(); 
     /* not sure what you expect "item" to be, is index but used your same code*/ 
     featureList.filter(function(item) { 
      /* not sure what XXX property is for items*/ 
      return item.values().colour == color && tem.values().XXXXX==itemVal; 

     }); 
     return false; 
    }); 

Answer 2

我假設＃過濾衣服從選擇標籤獲得cureent值是一個按鈕，用戶點擊應用過濾。

$('#filter-clothes').on('click', function() { 
    var colorFilter = $('#colour').text(); 
    var itemFilter = $('#items').text(); 

    featureList.filter(function(item) { 
     return 
      (colorFilter==='All packages' || item.values().colour === colorFilter) 
      && (itemFilter==='All items' || item.values().item === itemFilter); 
    }); 

    return false; 
}); 

你想在有選擇的顏色或項目的下拉列表中的值僅應用濾波器加以充實。

編輯：這裏是一些console.log（）調用的版本，應該可以幫助你找出爲什麼它只在你使用||時才起作用。 （OR），而不是& &（AND）：

$('#filter-clothes').on('click', function() { 
    var colorFilter = $('#colour').text(); 
    var itemFilter = $('#items').text(); 

    console.log('colorFilter: ' + colorFilter); 
    console.log('itemFilter : ' + itemFilter); 
    console.log('Applying filter now...'); 

    featureList.filter(function(item) { 
     console.log('Running filter() on item: ('+item+')'); 
     console.log('item.values().colour: ' + item.values().colour); 
     console.log('item.values().item: ' + item.values().item); 

     return 
      (colorFilter==='All packages' || item.values().colour === colorFilter) 
      && (itemFilter==='All items' || item.values().item === itemFilter); 
    }); 

    return false; 
}); 

Answer 3

這篇文章對我幫助很大，所以我想我會在這裏添加此櫃面別人試圖做什麼，我有。

首先JS的list.js：

/* 
* Filtering 
*/ 
var options = { 
    valueNames: ['name','phone','status','street','tier','type','zip','zone'], 
    plugins: [ 
    ['fuzzySearch'] 
    ] 
} 
var featureList = new List('directory-list', options) 

$('.search-fuzzy').keyup(function(){ 
    featureList.fuzzySearch($(this).val()); 
}); 

$('#filter-select').on('click', 'a.filters', function(e){ 
    if(this.id == 'filter-type-any' || this.id == 'filter-status-any' || this.id == 'filter-zone-any'){ 
    $(this).addClass('active').parent().siblings().children().removeClass('active') 
    } else { 
    $(this).toggleClass('active') 
    $(this).parent().parent().find('.any').removeClass('active') 
    } 
    var activeFilters = [] 
    $('#filter-select').find('a.active').each(function(i) { 
    if (this.getAttribute('data-match')){ 
     activeFilters.push(this.getAttribute('data-match')) 
     } 
    }) 
    if(activeFilters.length) { 
    var anyType = (($.inArray('resident', activeFilters) + $.inArray('business', activeFilters) + $.inArray('school', activeFilters)) == -3) ? true : false; 
    var anyStatus = (($.inArray('current', activeFilters) + $.inArray('expiring', activeFilters) + $.inArray('expired', activeFilters) + $.inArray('never', activeFilters)) == -4) ? true : false; 
    var anyZone = (($.inArray('zone1', activeFilters) + $.inArray('zone2', activeFilters) + $.inArray('zone3', activeFilters) + $.inArray('zone4', activeFilters) + $.inArray('zone5', activeFilters) + $.inArray('zone6', activeFilters) + $.inArray('zone7', activeFilters) + $.inArray('zone8', activeFilters)) == -8) ? true : false; 
    featureList.filter(function(item) { 
     if (
     (anyType || ($.inArray(item.values().type.toLowerCase(), activeFilters) > -1)) 
     && 
     (anyStatus || ($.inArray(item.values().status.toLowerCase(), activeFilters) > -1)) 
     && 
     (anyZone || ($.inArray(item.values().zone.toLowerCase(), activeFilters) > -1))) 
     { 
     return true; 
     } else { 
     return false; 
     } 
    }) 
    } else { 
    featureList.filter() 
    } 
}) 

目錄篩選器控制

#directory-filters 
    .row-fluid 
    input.search-fuzzy(placeholder='Search') 
    #filter-select.row-fluid 
    .span6 
     h5 Type 
     ul#filter-type 
     li 
      a#filter-type-any.filters.any.active(href='#') All Entries 
     li 
      a#filter-type-people.filters(href='#', data-match='resident') People 
     li 
      a#filter-type-business.filters(href='#', data-match='business') Business 
     li 
      a#filter-type-schools.filters(href='#', data-match='school') Schools 
     br 
     h5 Status 
     ul#filter-status 
     li 
      a#filter-status-any.filters.any.active(href='#') Any Status 
     li 
      a#filter-status-member.filters(href='#', data-match='current') Members 
     li 
      a#filter-status-expiring.filters(href='#', data-match='expiring') Expiring 
     li 
      a#filter-status-expired.filters(href='#', data-match='expired') Expired 
     li 
      a#filter-status-never.filters(href='#', data-match='never') Never Member 
    .span6 
     h5 Zone 
     ul#filter-zone 
     li 
      a#filter-zone-any.filters.any.active(href='#') All Zones 
     li 
      a#filter-zone-1.filters(href='#', data-match='zone1') Zone 1 
     li 
      a#filter-zone-2.filters(href='#', data-match='zone2') Zone 2 
     li 
      a#filter-zone-3.filters(href='#', data-match='zone3') Zone 3 
     li 
      a#filter-zone-4.filters(href='#', data-match='zone4') Zone 4 
     li 
      a#filter-zone-5.filters(href='#', data-match='zone5') Zone 5 
     li 
      a#filter-zone-6.filters(href='#', data-match='zone6') Zone 6 
     li 
      a#filter-zone-7.filters(href='#', data-match='zone7') Zone 7 
     li 
      a#filter-zone-8.filters(href='#', data-match='zone8') Zone 8 

Answer 4

這將做到這一點：

$('#filter-clothes').click(function() { 
    featureList.filter(function(item) { 
     var colour = $("#colour").text(); 
     var items = $("#items").text(); 
     if (item.values().colour == colour && item.values().items == items) { 
      return true; 
     } else { 
      return false; 
     } 
    }); 
    return false; 
}); 

只要確保顏色和物品都在過濾器選項

var options = { valueNames: [ 'colour', 'listT items ype' ] }; 
var featureList = new List('viewList', options);