elke website heeft een zoekbalk nodig waarmee een gebruiker de inhoud van zijn bedrijf op die pagina kan doorzoeken. Een eenvoudige zoekbalk kan worden gemaakt met behulp van HTML, CSS, en JavaScript alleen. Geavanceerde zoekalgoritmen zoeken naar veel dingen zoals gerelateerde inhoud en toont vervolgens de resultaten. Degene die we gaan maken zal zoeken naar substrings in een string.
HTML
In deze sectie zullen we HTML-deel van de code schrijven. In HTML koppelen we gewoon onze Stylesheets en ons JavaScript-bestand., Input tag wordt gebruikt voor het maken van de zoekbalk en het bevat verschillende attributen zoals type, plaatshouder, naam. We hebben ook een lijst nodig met items met verschillende namen van dieren, zodat we hiermee naar dieren kunnen zoeken. De klassen en ID ‘ s die gebruikt worden in tags worden gedefinieerd in het stylesheet hieronder.
uitvoer:
CSS
hoewel het bovenstaande invoerlabel en de geordende lijst er goed uitzien, heeft het nog steeds enige opmaak nodig., Voor de zoekbalk styling, wat marge en opvulling worden toegevoegd om het er schoon uitzien. De metingen zijn in procenten, zodat het zich aanpast bij gebruik in elke grootte van het scherm (mobiel, Desktop enz.). Webkit-overgang wordt gebruikt om de breedte van de zoekbalk te wijzigen wanneer erop wordt geklikt. De initiële breedte van de zoekbalk is 30%, maar wanneer erop wordt geklikt, zal het veranderen naar 70% met een ease-in ease-out overgang van 0,15 seconden.
Output
Na het toevoegen van Styling, zou onze pagina er zo uit moeten zien.
opmerking: als de opmaak van uw pagina niet verandert, controleer dan de opmaak.,css-bestand bevindt zich in dezelfde map als index.HTML.
Het is nog steeds onvolledig, omdat we nog steeds het JavaScript nodig hebben om de functionaliteit van deze zoekbalk te voltooien.
JavaScript
In de HTML-code van de zoekbalk gaven we de invoer een id=”searchbar” en onkeyup noemden we de functie “search_animal”. onkeyup roept de functie aan telkens wanneer een toets op het toetsenbord wordt vrijgegeven.
We krijgen eerst onze input met behulp van getElementById. Zorg ervoor om het te converteren naar kleine letters om hoofdlettergevoeligheid te voorkomen tijdens het zoeken. Een reeks documenten wordt opgeslagen in x. deze bevat elke lijst met id= “dieren”., Daarna wordt een lus uitgevoerd om te controleren of innerHTML van elk document de input substring bevat als dit niet het geval is, wordt de eigenschap display ingesteld op ‘None’ zodat het onzichtbaar is aan de voorkant.
Output: