Wstępny kod HTML
Na wstępie przygotowałem kod HTML formularza z przyciskami typu checkbox, które posłużą nam za bazę do stworzenia filtrów. Zawierają one kilka opcji, ważne jest, aby miały unikalne identyfikatory, po których będzie się odbywało filtrowanie danych na naszej stronie.
<form class="filters">
<div class="filters__group">
<div class="filters__title">Type</div>
<ul class="filters__items">
<li class="filters__item" data-filter="">
<label for="filters_classic">
<input id="filters_classic" type="checkbox" name="filterType[]" value="classic" />
<span>classic</span>
</label>
</li>
<li class="filters__item" data-filter="">
<label for="filters_progress">
<input id="filters_progress" type="checkbox" name="filterType[]" value="progress" />
<span>progress</span>
</label>
</li>
<li class="filters__item" data-filter="">
<label for="filters_vintage">
<input id="filters_vintage" type="checkbox" name="filterType[]" value="vintage" />
<span>vintage</span>
</label>
</li>
<li class="filters__item" data-filter="">
<label for="filters_boho">
<input id="filters_boho" type="checkbox" name="filterType[]" value="boho" />
<span>boho</span>
</label>
</li>
<li class="filters__item" data-filter="">
<label for="filters_deluxe">
<input id="filters_deluxe" type="checkbox" name="filterType[]" value="deluxe" />
<span>deluxe</span>
</label>
</li>
</ul>
</div>
</form>
Na tak przygotowanym kodzie HTML będę bazował i wykonam dalszą część operacji na danych. Oczywiście filtry można dostosować do własnych potrzeb, jednak w tym przypadku powinny być w takim oto schemacie. Warto tutaj też zadbać o poprawne wyrównanie checkboxów względem tekstu, co jakiś czas temu opisywałem.
Przygotowanie danych
Mając już gotowy kod HTML, możemy przejść do jego obsługi w JavaScript. Rzecz jasna filtrowanie danych będzie przetwarzane w tle.
Zatem odczytajmy listę pól checkbox z formularza:
const data = document.querySelector(`.filters`);
data.querySelectorAll(`label`).forEach((label) => {
label.querySelector(`input[type="checkbox"]`).addEventListener("change", (event) => {
console.log(event);
});
});
W powyższym kodzie przetwarzamy kolejno, wszystkie tagi label
, następnie przechwytujemy event zmiany stanu każdego pola typu checkbox
. W odpowiedzi uzyskamy event z konkretnymi informacjami o wybranym polu. Informacje, które będą nas za chwilę interesowały to value
oraz checked
.
Przetwarzanie danych
Przygotujmy sobie teraz metodę do przetwarzania naszego zbioru checkboxów.
function parseFormFilters(data) {
return Object.keys(data).reduce((map, obj) => {
map[data[obj].value] = data[obj].checked;
return map;
}, {});
}
Powyższa funkcja wykorzystuje metodę reduce()
do przepisania obiektu formularza (konkretniej, pól formularza) do nowego obiektu w nowym schemacie. Nowy schemat oczywiście zawiera wcześniej wspomniane i potrzebne nam informacje o wartości i zaznaczeniu (true/false) danego pola. Całość będzie w formie przejrzystego obiektu, który z kolei posłuży do oczekiwanego przefiltrowania danych.
W tym miejscu możemy już zmodyfikować nasz mechanizm obsługi kliknięć w checkboxy:
data.querySelectorAll(`label`).forEach((label) => {
label.querySelector(`input[type="checkbox"]`).addEventListener("change", (event) => {
console.log("filters", parseFormFilters(data));
});
});
Oto co otrzymamy w efekcie:
{
"classic": true,
"progress": false,
"vintage": true,
"boho": false,
"deluxe": false
}
Zasada działania
W zasadzie mogłem zacząć od omówienia sposobu działania tego mechanizmu, jednak postanowiłem, że najpierw skupimy się na kodzie, który jest prosty.
Wybieramy formularz z filtrami za pomocą document.querySelector(`.filters`)
, w nim wybieramy wszystkie elementy label
oraz zawarte w nich pola checkbox
. Następnie odbieramy event zmiany stanu i uruchamiamy funkcję przetwarzającą cały formularz.
Wykorzystanie w praktyce
Powyższy skrypt można wykorzystać na wiele sposobów. Najprostszym byłoby przetwarzanie wynikowego obiektu na zasadzie pokazywania lub ukrywania produktów (elementów) na stronie. Innym sposobem może być przekazanie owego obiektu do dalszej obróbki w zewnętrznym pluginie filtrującym.
Podsumowanie
Jestem ciekaw waszych sposobów na filtrowanie danych i w jaki sposób je integrujecie z zestawem danych.