Question

I’m attempting to put together a simple jQuery product filter for a store that lists all products of a category on one page. This can’t be achieved through AJAX because of the way the store is set up.

Simply put, all products of the category are on one page. They have varying brands product names and team names. The markup looks something like this (the form at the end is how I’m planning on doing the filter).

<div id="CategoryContent">
<ul>

<li class="product">Brand1 PRODUCT1 TeamA</li>
<li class="product">Brand1 PRODUCT2 TeamB</li>
<li class="product">Brand2 PRODUCT3 TeamB</li>
<li class="product">Brand2 PRODUCT4 TeamC</li>
<li class="product">Brand3 PRODUCT5 TeamA</li>
<li class="product">Brand3 PRODUCT6 TeamD</li>
<li class="product">Brand4 PRODUCT7 TeamD</li>
<li class="product">Brand1 PRODUCT8 TeamA</li>
<li class="product">Brand1 PRODUCT9 TeamA</li>
<li class="product">Brand1 PRODUCT10 TeamB</li>
<li class="product">Brand4 PRODUCT11 TeamD</li>
<li class="product">Brand2 PRODUCT12 TeamA</li>
</ul>

<div style="clear:both;"></div>
<div class="filter">
<form id= "brandfilter" action="">
    <h2>Brands:</h2>
<input type="checkbox" name="brand" value="Brand1"/>Brand1 </br>
<input type="checkbox" name="brand" value="Brand2"/>Brand2 </br>
<input type="checkbox" name="brand" value="Brand3"/>Brand3 </br>    
<input type="checkbox" name="brand" value="Brand1"/>Brand4 </br>
</form>
<form id="teamfilter" action="">
<input type="checkbox" name="team" value="TeamA"/>TeamA </br>
<input type="checkbox" name="team" value="TeamB"/>TeamB </br>
<input type="checkbox" name="team" value="TeamC"/>TeamC </br>
<input type="checkbox" name="team" value="TeamD"/>TeamD </br>
</form>

I have found this filter works as I want. In console replacing hide with show and Brand1 with Brand2, TeamA, etc works just fine.

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1)")
).hide();

The next step is getting a double filter which works as well:

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1):contains(TeamA)")
).hide();

My problem with getting this working is two fold. 1 is replacing the Brand1 / Team A with variables (hence the formids).

The second is trying to run the script when a checkbox is clicked. It should work if either one is clicked and if both are clicked (meaning that with the script above it would need to reset by showing all and then hiding).

Currently to initiate it I’m running this script but I’m running into problems so I’ve gone back to just 1 filter.

$("input:checkbox[name='brand']").click(function() {
    var brandfilter = $(this).val();
    alert (brandfilter);
    $("#CategoryContent li:contains('  + brandfilter + ')").parent().hide();
});

The alert that pops up is what I want (i.e. Brand1) but the hide function afterwards doesn’t work and when I alert (brandfilter) again in console again I get [object HTMLFormElement]. So I think the variable isn’t storing correctly or something?

Here is the simple working basic script http://jsfiddle.net/7gYJc/

Answer 1

Assuming you want to show items which match any currently ticked box, you can use this:

$('input:checkbox').change(showHideProducts);

function showHideProducts()
{
    var checked = $('input:checked');
    var products = $('.product');

    // If all the boxes are unchecked, show all the products.
    if (checked.length == 0)
    {
        products.show();
    }
    else
    {
        products.hide();
        checked.each
        (
            function()
            {
                $('.product:contains("' + $(this).val() + '")').show();
            }            
        );
    }
}​

EDIT: Since you want all the boxes to display when nothing is checked, just add an if (length = 0) check and show everything in there (see above).