jQuery filter elements based on data attribute

Question

I have a set of checkboxes and select list that are being used to filter elements.

Here is my html:

<div id="users">
  <input name="user" type="checkbox" value="1">
  John
  <input name="user" type="checkbox" value="2">
  Mike
  <input name="user" type="checkbox" value="3">
  Peter </div>

<select name="products">
  <option value="4">Product 1</option>
  <option value="5">Product 2</option>
  <option value="6">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
  <li data-filter="2">Item 2</li>
  <li data-filter="1">Item 3</li>
  <li data-filter="3">Item 4</li>
</ul>

and here is javascript:

$('select[name=products]').change(function() {
    var filter = $(this).val();
    filterList(filter);
});

//News filter function
function filterList(value) {
    var list = $("#items li");
    $(list).fadeOut("fast");
    if (value == "all") {
        $("#items").find("li").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    } else {
        $("#items").find("li[data-filter*=" + value + "]").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    }
}

My problem is now to include checkboxes as well as part of filtering options, but I'm not sure which way to go. Do I coma separate data-filter values like: data-filter="1,3" where 1 is product, and 3 is user, or add new data attribute entirely?

Rajdeep · Accepted Answer · 2016-05-04 12:59:12Z

2

your select items are having different value, it should be like

<select name="products">
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
 <li data-filter="2">Item 2</li>
 <li data-filter="3">Item 3</li>
 <li data-filter="4">Item 4</li>
</ul>

for users, you have to make an array and put the checked values in that. Then, on dropdown change you will call another function at end foreach values in the array. Some idea you can get from it.

 var selected = ['1','2'];
      $('selected').each(function (i) {
            $("#items").find("li[data-filter*=" + value + "]").each(function ()     {
            $(this).delay(200).slidedown("fast");
        });
    });

answered May 4, 2016 at 12:59

Rajdeep

8228 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alko Over a year ago

Yes, select values are different then user values, so it will need to work both ways, using checkbox and select.

Maxi Schvindt · Accepted Answer · 2016-05-04 13:41:27Z

0

new code and solution. https://jsfiddle.net/Cuchu/p4w5zbyh/

Html - add class 'check' in the imputs

<div id="users">
  <input class="check" name="user" type="checkbox" value="1">
  John
  <input class="check" name="user" type="checkbox" value="2">
  Mike
  <input class="check" name="user" type="checkbox" value="3">
  Peter </div>

<select name="products">
  <option value="4">Product 1</option>
  <option value="5">Product 2</option>
  <option value="6">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
  <li data-filter="2">Item 2</li>
  <li data-filter="1">Item 3</li>
  <li data-filter="3">Item 4</li>
</ul>

Javascript

$('select[name=products]').change(function() {
    var filter = $(this).val();
    filterList(filter);
});

//News filter function
function filterList(value) {

    var checkedValue = new Array(); 

        var inputElements = document.getElementsByClassName('check');
        for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue.push(inputElements[i].value);
      }
        }

      var list = $("#items li");
    $(list).fadeOut("fast");

    if (value == "all") {
          $("#items").find("li").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    } else {
        if(checkedValue.indexOf(value) < 0) {
            checkedValue.push(value);
        } 

        filter = new Array;

        checkedValue.forEach(function(entry) {
        filter.push("li[data-filter=" + entry + "]");

                });

        miVar1 = filter.join(",");
        console.log(miVar1);

            $("#items").find(miVar1).each(function () {
            $(this).delay(200).slideDown("fast");
        });
    }
}

When you change select, read a checbox selecteds and set values in a array, and then, read value to select products and add value to array. Then, the code

filter = new Array;
checkedValue.forEach(function(entry) {
    filter.push("li[data-filter=" + entry + "]");
});

miVar1 = filter.join(",");

create a new array with element filter and the concatenate array in string, example: "li[data-filter=1],li[data-filter=2],li[data-filter=4]" and use in the filter jquery.

Test jsfiddle and check browser console to see filter.

edited May 4, 2016 at 13:41

answered May 4, 2016 at 13:15

Maxi Schvindt

1,4601 gold badge11 silver badges21 bronze badges

8 Comments

Maxi Schvindt Over a year ago

You can add event to click on the checkbox and execute function, read select option and checkbox values.

Alko Over a year ago

your jsfiddle does not work correctly for both products and users.

Maxi Schvindt Over a year ago

Why?? i test and work fine! check the console and see filter.. Or delete cache and try with jsfiddle. You understand the explication?

Maxi Schvindt Over a year ago

Or your select is AND?? If you check john (value 1) and select Product 2(value 5) you can see li with data-filter=1 or data-filter=5. If you need AND, the li attribute is bad, need use two attribute or conbine value, ex: user_product (1_5)

Alko Over a year ago

Its definatelly not working in Firefox, console shows an empty string.

|

Collectives™ on Stack Overflow

jQuery filter elements based on data attribute

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related