Jokainen sivusto tarvitsee haku-palkki, jonka kautta käyttäjä voi etsiä sisältöä heidän huolensa sivulla. Perus haku bar voidaan tehdä käyttämällä HTML, CSS, ja JavaScript vain. Advance hakualgoritmit etsivät monia asioita, kuten aiheeseen liittyvää sisältöä ja sitten näyttää tulokset. Se, jonka aiomme tehdä, etsii alustoja narusta.
HTML
tässä osiossa on kirjoittaa HTML-koodissa. HTML, me vain linkittää meidän Stylesheets ja JavaScript tiedosto., Input tagia käytetään hakupalkin luomiseen ja se sisältää useita attribuutteja, kuten tyyppi, paikkasidontaja, nimi. Tarvitsemme myös listan asioista, joissa on erilaisia eläinten nimiä, joiden avulla voimme etsiä eläimiä tämän kautta. Tunnukset ja tunnukset, joita käytetään tageissa, määritellään alla olevassa stylesheetissä.
Output:
CSS
Vaikka edellä input-tunnisteen ja järjestetty lista näyttää hyvältä, se on vielä joitakin tyyli., Hakupalkin muotoiluun lisätään marginaalia ja pehmustetta, jotta se näyttäisi puhtaalta. Mittaukset ovat prosentteina niin, että se säätää itseään, kun sitä käytetään missä tahansa näytön koossa (mobiili, työpöytä jne.). Webkit-siirtymää käytetään hakupalkin leveyden muuttamiseen klikattaessa. Hakupalkin alkuleveys on 30%, mutta kun sitä klikataan, se muuttuu 70%: iin helposti siirryttäessä 0,15 sekuntia.
ulostulo
stailauksen lisäämisen jälkeen sivun pitäisi näyttää tältä.
Huomaa: Jos sivun stailaus ei muutu, varmista tyyli.,css-tiedosto on samassa kansiossa kuin index.html.
se on vielä keskeneräinen, sillä tarvitsemme vielä JavaScriptin tämän hakupalkin toimivuuden täydentämiseksi.
JavaScript
HTML-koodi search bar, annoimme input id=”searchbar” ja onkeyup me kutsutaan, toiminto ”search_animal”. onkeyup kutsuu funktiota joka kerta, kun näppäimistöllä julkaistaan avain.
saamme ensin panoksemme getelementbyidin avulla. Varmista muuntaa sen pienempi tapaus välttää tapausherkkyyttä etsinnän aikana. Joukko asiakirjoja on tallennettu x. Tämä sisältää jokaisen luettelon, jossa on id= ”Eläimet”., Sen jälkeen silmukka on ajaa tarkistaa, jos innerHTML jokainen asiakirja sisältää tulo osamerkkijonon, jos se ei ole, display-ominaisuuden arvoksi on asetettu ”Ei mitään” niin, että se on näkymätön etuosa.
Output: