main.js — paieškos jungimas

Kodo stulpelyje — main.js su paieška. Pridedam ketvirtą laisvą kintamąjį searchQuery, išvestinę funkciją visiblePictures() (nufiltruotos nuotraukos) ir debounce'intą įvesties klausytoją.

Prieš tai index.html reikia paieškos laukelio:

<input type="search" id="search" placeholder="Search by title…" autocomplete="off">

Svarbiausia eilutė — įvesties klausytojas, apvyniotas debounce:

searchInput.addEventListener('input', debounce((e) => {
  searchQuery = e.target.value.trim();
  render();                                   // filtruojam TIK nurimus
}, 250));

Ir render() visada piešia iš išvestinių duomenų:

function render() {
  renderGallery({ isLoading, error, pictures: visiblePictures() });
}

Patikrink. Serviruok ir vesk tekstą į paiešką:

1. Vedi „moon" → tinklelis susitraukia iki pavadinimų su „moon".
2. Ištrini → grįžta visos nuotraukos.
3. Vedi tai, ko nėra → matai „No pictures match…" (tuščia būsena iš 6 pamokos).

Spąstai (be debounce). Laikinai nuimk debounce (palik tik (e) => {...}) ir naršyklės „Performance" ar console.count() viduje pažiūrėk, kiek kartų suveikia render() rašant. Kiekvienas paspaudimas — pilnas tinklelio perpiešimas. Vietinei paieškai tai gal ir „veikia", bet įprotis blogas: pridėk serverio paiešką ir tai virsta srautu užklausų. Įvykius, kurie „lyja", visada apvynioji debounce.

Pastebėk (kaupiasi). Turim jau keturis laisvus kintamuosius: pictures, isLoading, error, searchQuery. Kol kas valdoma. Bet kolekcija (10 pamoka) pridės dar rikiavimą, puslapiavimą, savo paiešką… 8 pamokoje pamatysim, kur tai veda.