Opret en skjult søgelinje med HTML, CSS og JavaScript

Interaktive GUI-elementer gør din applikation nemmere at bruge. HTML indeholder flere formularkomponenter som standard, men du vil gerne bruge CSS, så de passer til dit design. Du kan også bruge JavaScript til at udvide eller ændre deres adfærd.

Du kan oprette sådanne komponenter ved hjælp af et bibliotek som Tailwind, men det er også nyttigt at vide, hvordan man opretter dem fra bunden.

Find ud af, hvordan du opretter en skjult søgelinje ved hjælp af HTML, CSS og JavaScript.

Opret indholdsstrukturen med HTML

Her er HTML-koden til funktionen. Du vil have et overordnet element, der indeholder et input og et knapelement. Du vil også importere fantastiske scripts til søgeikonet. I dette tilfælde skal du bruge forstørrelsesglassøgeikonet.

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8" />
<metahttp-ækvivalent="X-UA-kompatibel"indhold="IE=kant" />
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0" />





instagram viewer

<manuskriptsrc=" https://kit.fontawesome.com/d69fb28507.js"krydsoprindelse="anonym">manuskript>
<titel>Skjult søgelinjetitel>
hoved>

<legeme>
<divklasse="forælder">
<inputklasse="input"type="type"pladsholder="Søg..." />
<knapklasse="btn">
<jegklasse="fa-solid fa-lup">jeg>
knap>
div>
legeme>
html>

Style grænsefladen ved hjælp af CSS

I CSS-filen skal du give det overordnede element positionen som relativ. En relativ position gør det muligt for input- og knapelementerne at flytte rundt på forælderen. Det CSS position egenskab styrer flere typer layout, så det er vigtigt at forstå.

Du vil også justere begge elementer i midten for bedre synlighed. Men på din ansøgning kan du vælge at have søgefeltet, når du vil. Giv også begge elementer den samme bredde, så de ser samme størrelse ud og ikke det ene større end det andet.

Så skal du give forælderen en aktiv klasse for både input- og knapelementerne. På denne måde vil det transformere som angivet, når elementet bevæger sig.

* {
margen: 0;
polstring: 0;
kassestørrelse: grænse-kasse;
}
legeme {
baggrundsfarve: #d9d9d9;
højde: 100vh;
Skærm: bøje;
align-elementer: centrum;
retfærdiggøre-indhold: centrum;
}
.forælder {
position: i forhold;
}
.input {
omrids: ingen;
grænse: ingen;
grænse-radius: 100px;
polstring: 5px 10px;
bredde: 40px;
overgang: bredde 0.3slethed;
}
.input::pladsholder {
farve: grøn;
}
.forælder.aktiv.input {
bredde: 200px;
}
.btn {
bredde: 40px;
polstring: 5px 10px;
cursoren: pointer;
grænse-radius: 100px;
grænse: ingen;
baggrund: grøn;
Skærm: inline;
kasse-skygge: 0 0 5pxrgba(0, 0, 0, 0.2);
position: absolut;
top: 0;
venstre: 0;
overgang: transformere 0.3slethed;
}
.forælder.aktiv.btn {
transformere: translateX(210px);
}
.fa-solid {
farve: #ffffff;
}

Du skal have en søgeknap, der ser sådan ud:

Tilføj JavaScript-funktionalitet

Skriv derefter JavaScript-kode til elementerne. Først skal du vælge de overordnede, input- og knapelementer ved hjælp af JavaScript querySelector() metode.

Tilføj derefter en klikbegivenhedslytter til knappen. Så når der klikkes på knappen, skifter knappen i henhold til den valgte klasse. Tilføj fokus() metode til at sætte fokus på det angivne element. Den begynder at blinke, hver gang søgelinjen udvides.

lade input = dokument.querySelector(".input");
lade btn = dokument.querySelector(".btn");
lade forælder = dokument.querySelector(".forælder");
btn.addEventListener("klik", () => {
 parent.classList.toggle("aktiv");
 input.focus();
});

Hvis du klikker på knappen, åbner den søgelinjen og omvendt. Det ser ud som vist i følgende diagram:

Nu, hvis du indtaster information og klikker på knappen, lukkes den, mens systemet søger efter oplysningerne.

Fedt, ikke? Du kan se denne kode og lege med søgefeltet tændt codepen.io. Du kan tilpasse søgelinjen yderligere ved at oprette en søgelinjelisten af varer. Dette gør det nemmere for dine brugere at foretage søgninger på appen.

Andre funktioner, du kan oprette

Som nybegynder inden for webudvikling er der mange funktioner, du kan oprette med HTML, CSS og JavaScript. Du kan oprette et popup-/modalt vindue, en billedskyder, en Footer auto-updater og mange flere.

Sådanne kreative projekter er gode til at lære programmeringskoncepter. Du kommer til at anvende færdigheder, efterhånden som du lærer dem, hvilket øger anvendeligheden af ​​færdigheden. Du kommer også til at skabe fantastiske brugergrænseflader, som du og dine brugere vil nyde. Brug denne guide til at oprette en skjult søgelinje og andre interaktive funktioner til dit websted.