Každá webová stránka potřebuje vyhledávací panel, jehož prostřednictvím může uživatel vyhledávat obsah jejich obavy na této stránce. Základní vyhledávací lištu lze vytvořit pouze pomocí HTML, CSS a JavaScript. Advance vyhledávání algoritmy hledat mnoho věcí, jako je související obsah a pak ukazuje výsledky. Ten, který uděláme, bude hledat podřetězce v řetězci.
HTML
v této sekci napíšeme HTML část kódu. V HTML jednoduše propojíme naše styly a náš soubor JavaScript., Vstupní značka se používá pro vytvoření vyhledávací lišty a obsahuje několik atributů, jako je typ, zástupný symbol, název. Potřebujeme také seznam položek, které budou obsahovat různé názvy zvířat, které nám umožní hledat zvířata prostřednictvím tohoto. Třídy a ID používané ve značkách budou definovány ve stylu níže.
Výstup:
CSS
i Když výše uvedené vstupní značka a nařídil seznam vypadá dobře, to ještě potřebuje nějaký styl., Pro styling vyhledávacího panelu se přidávají určité okraje a polstrování, aby vypadaly čistě. Měření jsou v procentech, takže se přizpůsobí při použití v jakékoli velikosti obrazovky (mobilní, stolní atd.). Webkit přechod se používá ke změně šířky vyhledávacího pole po kliknutí. Počáteční šířka vyhledávací lišty je 30%, ale když je kliknuto, změní se na 70% s snadným přechodem 0,15 sekundy.
výstup
Po přidání stylingu by naše stránka měla vypadat takto.
Poznámka: Pokud se styl vaší stránky nezmění,ujistěte se, že styl.,soubor css je ve stejné složce jako index.html.
je stále neúplný, protože stále potřebujeme JavaScript k dokončení funkčnosti tohoto vyhledávacího panelu.
JavaScript
v HTML kódu vyhledávací lišty jsme zadali ID = “ searchbar „a onkeyup jsme volali, funkci“search_animal“. onkeyup volá funkci pokaždé, když je klávesa uvolněna na klávesnici.
nejprve získáme náš vstup pomocí getElementById. Nezapomeňte jej převést na malá písmena, abyste se vyhnuli citlivosti písmen při vyhledávání. Řada dokumentů je uložena v x. To obsahuje každý seznam, který má id= „zvířata“., Po této smyčky je běh zkontrolovat, zda innerHTML každý dokument obsahuje vstupní řetězec, pokud ne, displej vlastnost je nastavena na „None“ tak, že je neviditelný na přední straně.
výstup: