GeeksforGeeks (Magyar)

minden weboldalnak szüksége van egy keresősávra, amelyen keresztül a felhasználó megkeresheti az adott oldal tartalmát. Az alap keresősáv csak HTML, CSS és JavaScript segítségével készíthető. Az előzetes keresési algoritmusok sok dolgot keresnek, például a kapcsolódó tartalmat, majd megmutatják az eredményeket. Az egyik, hogy fogunk, hogy fog keresni szubsztrátok egy húr.

HTML

ebben a szakaszban a kód HTML részét írjuk. A HTML-ben csak összekapcsoljuk a Stíluslapjainkat és a JavaScript fájlunkat., A keresősáv létrehozásához beviteli címkét használnak, amely több attribútumot tartalmaz, mint például a típus, a helyőrző, a név. Szükségünk van egy olyan elemek listájára is, amelyek különböző állatneveket tartalmaznak, amelyek lehetővé teszik számunkra, hogy ezen keresztül állatokat keressünk. A címkékben használt osztályokat és azonosítókat az alábbi stíluslapban definiáljuk.



kimenet:

CSS

bár a fenti bemeneti címke és a rendezett lista jól néz ki, még mindig szüksége van némi stílusra., A keresősáv stílus, néhány margó, padding adunk, hogy úgy néz ki, tiszta. A mérések százalékban vannak, így a képernyő bármely méreténél (mobil, asztali stb.) A Webkit átmenet a keresősáv szélességének megváltoztatására szolgál, amikor rákattint. A keresősáv kezdeti szélessége 30%, de ha rákattint, akkor 70%-ra változik, 0, 15 másodperces könnyű átmenettel.

kimenet
stílus hozzáadása után oldalunknak így kell kinéznie.

Megjegyzés: Ha az oldal stílusa nem változik, ellenőrizze a stílust.,a css fájl ugyanabban a mappában található, mint az index.html.
még mindig hiányos, mivel továbbra is szükségünk van a JavaScriptre a keresősáv funkcionalitásának befejezéséhez.

JavaScript

A keresősáv HTML kódjában megadtuk a bemenetnek egy id=”keresősáv”, az onkeyup pedig a “search_animal”funkciót. az onkeyup minden alkalommal felhívja a funkciót, amikor egy kulcs megjelenik a billentyűzeten.
először a getelementbyid használatával kapjuk meg a bemenetünket. Győződjön meg róla, hogy átalakítani, hogy az alsó esetben, hogy elkerüljék az eset érzékenységét keresés közben. Egy sor dokumentumot tárolnak x. Ez tartalmazza az összes listát, amely id = “állatok”., Ezután egy hurok fut, hogy ellenőrizze, innerHTML minden dokumentum tartalmazza a bemeneti szubsztrát, ha nem, a kijelző tulajdonság van beállítva, hogy “nincs”úgy, hogy láthatatlan az elülső.

kimenet:

cikk címkék:

CSS
gyakorlati címkék:

Share

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük