Alkatrészek – áttekintés

Az alábbi aloldalakon részletesen bemutatjuk a PC részegységeit, szerepüket és a választási szempontokat.

HTML5 Search Input és JavaScript Keresés

Ez az oldal bemutatja a HTML5 <input type="search"> elem használatát JavaScript funkcionalitással:

HTML5 Keresőmező elemek:

type="search" - Speciális keresőmező, amely szemantikusan jelzi a kereső funkciót
placeholder - Segítő szöveg a mezőben, amely eltűnik amikor a felhasználó elkezd gépelni
role="search" - ARIA attribútum a jobb akadálymentesítéshez, segíti a képernyőolvasókat
aria-label - További kontextust ad a keresőmezőnek akadálymentesítés céljából
Mobilbarát funkciók: A search típus mobilon speciális billentyűzetet jelenít meg "Keresés" gombbal
Beépített X gomb: A böngészők automatikusan hozzáadnak egy törlés gombot a mezőhöz

JavaScript funkciók (search.js):

Valós idejű keresés: Az 'input' esemény figyelésével gépelés közben azonnal szűr
Form submit kezelés: Az 'e.preventDefault()' megakadályozza az oldal újratöltését
DOM manipuláció: A 'querySelector()' és 'querySelectorAll()' segítségével kiválasztjuk az elemeket
Dinamikus szűrés: A 'style.display' módosításával elrejtjük/megjelenítjük a kártyákat
String műveletek: A 'toLowerCase()' és 'includes()' segítségével keresünk a szövegben
Hibaüzenet: Ha nincs találat, dinamikusan létrehozunk egy üzenetet a 'createElement()' használatával

A keresőmező a <form> elemen belül helyezkedik el, így Enter billentyűvel is el lehet indítani a keresést. A JavaScript kód külső fájlban található (search.js), amely a HTML-be a <script src="search.js"></script> taggel van beágyazva.