fiecare site web are nevoie de o bară de căutare prin care un utilizator poate căuta conținutul preocupării sale pe pagina respectivă. O bară de căutare de bază poate fi făcută numai folosind HTML, CSS și JavaScript. Algoritmii de căutare avansată caută multe lucruri precum conținutul asociat și apoi arată rezultatele. Cel pe care îl vom face va căuta substrings într-un șir.
HTML
În această secțiune, vom scrie o parte HTML a codului. În HTML, vom lega doar foile noastre de stil și fișierul nostru JavaScript., Tag-ul de intrare este utilizat pentru crearea barei de căutare și include mai multe atribute, cum ar fi tipul, substituent, nume. De asemenea, avem nevoie de o listă de elemente care vor conține diferite nume de animale care ne vor permite să căutăm animale prin aceasta. Clasele și ID-urile utilizate în etichete vor fi definite în foaia de stil de mai jos.
Ieșire:
CSS
Deși mai presus de intrare tag-ul și lista ordonată a arata bine, mai are nevoie de unele styling., Pentru stilul barei de căutare, se adaugă o marjă și o umplutură pentru a face să pară curată. Măsurătorile sunt în procente, astfel încât să se ajusteze atunci când este utilizat în orice dimensiune a ecranului (mobil, Desktop etc.). Tranziția Webkit este utilizată pentru a schimba lățimea barei de căutare atunci când faceți clic. Lățimea inițială a barei de căutare este de 30%, dar atunci când se face clic, se va schimba la 70% cu o tranziție ease-in ease-out de 0,15 secunde.după adăugarea stilului, pagina noastră ar trebui să arate astfel.Notă: Dacă stilul paginii dvs. nu se schimbă, asigurați-vă că stilul.,fișier css este în același dosar ca și index.html.
este încă incomplet, deoarece avem încă nevoie de JavaScript pentru a completa funcționalitatea acestei bare de căutare.
JavaScript
În codul HTML al bara de căutare, am dat o intrare id=”c” și onkeyup-am sunat, funcția „search_animal”. onkeyup apelează funcția de fiecare dată când o tastă este eliberată pe tastatură.
Mai întâi primim contribuția noastră folosind getElementById. Asigurați-vă că îl convertiți la litere mici pentru a evita sensibilitatea cazurilor în timpul căutării. O serie de documente este stocată în x. aceasta conține fiecare listă care are id=”animale”., După aceea, o buclă este rulată pentru a verifica dacă innerHTML al fiecărui document include substringul de intrare dacă nu, proprietatea de afișare este setată la „niciuna”, astfel încât să fie invizibilă pe front-end.
Output: