Pure JS Filter

by Dhruvang Gajjar

HTML

<div class="select-box">
  <select class="filter" id="type">
    <option value="" selected>All</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>
  <select class="filter" id="category">
    <option value="" selected>All</option>
    <option value="x">X</option>
    <option value="y">Y</option>
    <option value="z">Z</option>
  </select>
</div>
<div class="item-wrapper">
  <div class="item" data-type="a" data-category="x">A X</div>
  <div class="item" data-type="b" data-category="z">B Z</div>
  <div class="item" data-type="c" data-category="x">C X</div>
  <div class="item" data-type="a" data-category="y">A Y</div>
  <div class="item" data-type="c" data-category="z">C Z</div>
  <div class="item" data-type="a" data-category="z">A Z</div>
  <div class="item" data-type="b" data-category="x">B X</div>
  <div class="item" data-type="b" data-category="y">B Y</div>
  <div class="item" data-type="c" data-category="y">C Y</div>
  <div class="item" data-type="a" data-category="z">A Z</div>
</div>

CSS

.select-box {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  width: 100%;
}

.filter {
  flex: 1 1 auto;
  margin: 10px;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid;
  font-size: 16px;
}

.item-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 15px;
  background: #e2e2e2;
  margin: 10px;
  flex-basis: 20%;
}

JavaScript

const filterType = document.querySelector("#type");
const filterCategory = document.querySelector("#category");

const items = Array.from(document.querySelectorAll(".item"));

filterType.addEventListener("change", filter);
filterCategory.addEventListener("change", filter);

function filter() {
  let TypeValue = filterType.value;
  let CategoryValue = filterCategory.value;
  let filtered = items.filter(item => {
    if (TypeValue && CategoryValue) {
      return (item.getAttribute("data-type") === TypeValue && item.getAttribute("data-category") === CategoryValue)
    } else if (TypeValue) {
      return item.getAttribute("data-type") === TypeValue
    } else if (CategoryValue) {
      return item.getAttribute("data-category") === CategoryValue
    } else {
      return item
    }
  });
  document.querySelector(".item-wrapper").innerHTML = null;
  filtered.forEach(el => {
    document.querySelector(".item-wrapper").appendChild(el)
  })
}