hvert websiteebsted har brug for en søgelinje, hvorigennem en bruger kan søge i indholdet af deres bekymring på den pågældende side. En grundlæggende søgning bar kan gøres ved hjælp af HTML, CSS, og JavaScript kun. Advance søgning algoritmer kigge efter mange ting som relateret indhold og derefter viser resultaterne. Den, vi skal lave, vil kigge efter underlag i en streng.
HTML
i dette afsnit skriver vi HTML-del af koden. I HTML, vil vi blot linke vores Stylesheets og vores JavaScript-fil., Input tag bruges til oprettelse af søgefeltet, og det indeholder flere attributter som type, pladsholder, navn. Vi har også brug for en liste over genstande, der indeholder forskellige dyrenavne, der giver os mulighed for at søge efter dyr gennem dette. Klasserne og ID ‘ erne, der bruges i tags, vil blive defineret i stylesheet nedenfor.
Output:
CSS
Selv om ovenstående input-tag og de bestilte liste ser fin ud, er det stadig har brug for nogle styling., Til styling af søgefeltet tilføjes en vis margen og polstring for at få det til at se rent ud. Målingerne er i procent, så det justerer sig selv, når det bruges i enhver størrelse på skærmen (mobil, Desktop osv.). Transitionebkit overgang bruges til at ændre bredden af søgefeltet, når der klikkes. Den oprindelige bredde af søgefeltet er 30%, men når det klikkes, vil det ændre sig til 70% med en lethed-i lethed-out overgang på 0,15 sekunder.
Output
efter tilføjelse af Styling skal vores side se sådan ud.
Bemærk: Hvis stylingen af din side ikke ændres, skal du sørge for stilen.,css-fil er i samme mappe som indeks.HTML.
det er stadig ufuldstændigt, da vi stadig har brug for JavaScript for at fuldføre funktionaliteten i denne søgefelt.
JavaScript
i HTML-koden i søgefeltet gav vi input et id=”søgelinje” og onkeyup kaldte vi funktionen “search_animal”. onkeyup kalder funktionen, hver gang en tast frigives på tastaturet.
vi får først vores input ved hjælp af getElementById. Sørg for at konvertere det til små bogstaver for at undgå sagsfølsomhed, mens du søger. En række dokumenter gemmes i.. dette indeholder hver liste, der har id=”dyr”., Efter at en løkke køres for at kontrollere, om innerHTML af hvert dokument indeholder input substring hvis det ikke, er egenskaben display indstillet til ‘ingen’, så det er usynlig på den forreste ende.
Output: