SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple filters with list.js plugin

    Hello,

    I am trying to create multiple filters for a list of products with the plugin list.js http://listjs.com/, i.e. I want to filter a list by both colour and item, at the moment the code below just does the filtering for red items how can I change the jquery code so that if the user chooses both a colour and an item, it filters correctly?

    Code:
          <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>
    
      <ul >
                                <li >
                                    <span class="colour">red</span> <span class="items">t-shirt</span>
                                </li>
                                <li >
                                    <span class="colour">yellow</span> <span class="items">trousers</span>
                                </li>
                                <li >
                                    <span class="colour">green</span> <span class="items">jumper</span>
                                </li>
                                <li >
                                    <span class="colour">red</span> <span class="items">t-shirt</span>
                                </li>
                                <li >
                                    <span class="colour">yellow</span> <span class="items">trousers</span>
                                </li>
    </ul>
    
    $('#filter-clothes').click(function() {
            featureList.filter(function(item) {
                if (item.values().colour == "Red") {
                    return true;
                } else {
                    return false;
                }
            });
            return false;
        });
    Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the answer with this code:

    $('.option-filter').click(function() {
    var packageFilter = $('#packages').val();
    var categoryFilter = $('#categories').val();

    featureList.filter(function(item) {
    return item.values().packageid === packageFilter || item.values().categoryid === categoryFilter;
    });

    return false;
    });
    but only thing I need now is to show all the products when they click on all for colours and all for items. ie. option value=0 for colours and option value = 0 for items, how can I write that? Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •