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: