Tutorial: Filtering Items in a List

This is happening place to discuss all things related to the Filtering Items in a List tutorial.

Kirupa :vamp:

Hey Kirupa,

Thank you for this nice example!
Can you or anyone else give an example of how this would work with multiple attributes?
LeeCWilliams posted a screenshot in the comment section below your post, but that didn’t make sense to me.

Let’s say your html is:

  • Food
  • Musician
  • Food & Musician
  • I found out that in css you can do the following:
    #itemsToFilter li[data-type*=Food] {background-color: green;}
    #itemsToFilter li[data-type*=Musician] {background-color: yellow;}
    (The asterisk causes one or multiple attributes to be recognised.)

    No problems there, so I’m interested in the javascript-part:
    How to create 2 checkboxes, displaying 1) Food and 2) Musician…

    Where 1) if both checkboxes are checked, food and musicians are displayed;
    2) if food is checked and musician is unchecked, the element is still visible, because it contains food, dispite it also contains musician;
    3) if musician is checked and food is unchecked, it is also still visible, because it contains musician, dispite it also contains food;
    and — 4) if both food and musician are unchecked, the li item disappears.

    I want this without having to make a new checkbox called ‘Food Musician’. Which could be done by adding
    #itemsToFilter li[data-type*=‘Food Musician’] {background:pink;}

    So just working with the checkboxes ‘Food’ and ‘Musician’.

    Winning answer gets a bar of chocolate.
    Thanks a lot!

    That is an interesting (and common) scenario. I’m a bit swamped at the moment to answer it unfortunately. Are you on a deadline for this?

    I am actually, but of course I don’t blame you for being busy too. I’ve posted this problem on stackoverflow as well, and I’m trying to tackle the problem myself. I’ll give you an update when I figured it out! Thanks for your reply. I’ll keep you posted :wink:

    Thanks for the tutorial :slight_smile: