Combined filter and search gallery

I was advised to write a post in this forum to see if anyone would be out there to help me.

I am trying to create a page that has HTML,CSS and JAVA script elements. The page is a gallery of items which I want to give users the power to search via filters and a search box. Whilst I managed to get 1 level of filter working I am unable to work out how to get category #2 and #3 filters to work together as an AND to filter the results further. Would anyone know how to build a multi level filter for a gallery?
Fiddle is here -> https://jsfiddle.net/1nv460td/ I adapted as much as I could understand from this page -> https://www.w3schools.com/howto/howto_js_filter_elements.asp

The search box is another task I would like to visit too however the filtering is priority for me as I think I can work out the search myself.

Thanks for any help

You have three predicates, not one, so you’ll need to consider them all when filtering, meaning you’ll need to store them somewhere (or look them up from the button elements)

No clue what’s a good idea and what isn’t but to show that it is in the realm of
possibilites:

<!DOCTYPE html>
<html>
  <head>
    <script>
      {
        const filters = {
          A: 'all',
          B: 'all'
        }

        function beep(event) {
          const [_, category, predicate] = event.srcElement.classList
          filters[category] = predicate
          console.log('updated filter settings to:', filters)
        }

        window.onload = function() {
          const buttons = document.getElementsByClassName('filter')
          Array.prototype.forEach.call(buttons, (btn) => btn.onclick=beep)
        }
      }
    </script>
  </head>
  <body>
    <button class="filter A all">A all</button>
    <button class="filter A kittens">A kittens</button>
    <button class="filter A puppies">A puppies</button>
    <button class="filter B all">B all</button>
    <button class="filter B brown">B brown</button>
    <button class="filter B black">B black</button>
  </body>
</html>
1 Like