Lag en skjult søkefelt med HTML, CSS og JavaScript

Interaktive GUI-elementer gjør applikasjonen din enklere å bruke. HTML inkluderer flere skjemakomponenter som standard, men du vil bruke CSS slik at de passer til designet ditt. Du kan også bruke JavaScript til å utvide eller endre oppførselen deres.

Du kan lage slike komponenter ved å bruke et bibliotek som Tailwind, men det er nyttig å vite hvordan du lager dem fra bunnen av også.

Finn ut hvordan du lager en skjult søkefelt ved hjelp av HTML, CSS og JavaScript.

Lag innholdsstrukturen med HTML

Her er HTML-koden for funksjonen. Du vil ha et overordnet element som inneholder en input og et knappeelement. Du vil også importere font-fantastiske skript for søkeikonet. I dette tilfellet vil du bruke forstørrelsesglasset søkeikon.

html>
<htmllang="no">
<hode>
<metategnsett="UTF-8" />
<metahttp-ekv="X-UA-kompatibel"innhold="IE=kant" />
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0" />
<manussrc=" https://kit.fontawesome.com/d69fb28507.js"kryssopprinnelse="anonym">

instagram viewer
manus>
<tittel>Skjult søkefelttittel>
hode>

<kropp>
<divklasse="foreldre">
<inputklasse="inngang"type="type"plassholder="Søk..." />
<knappklasse="btn">
<Jegklasse="fa-solid fa-forstørrelsesglass">Jeg>
knapp>
div>
kropp>
html>

Stil grensesnittet med CSS

I CSS-filen må du gi det overordnede elementet posisjonen som relativ. En relativ posisjon gjør at inngangs- og knappeelementene kan bevege seg rundt forelderen. De CSS-posisjonsegenskap kontrollerer flere typer layout, så det er viktig å forstå.

Du vil også justere begge elementene i midten for bedre synlighet. Men på applikasjonen din kan du velge å ha søkefeltet når du vil. Gi også begge elementene samme bredde slik at de ser like store ut og ikke det ene er større enn det andre.

Da må du gi forelderen en aktiv klasse for både input- og knappeelementene. På denne måten vil det transformeres som spesifisert når elementet beveger seg.

* {
margin: 0;
polstring: 0;
boksstørrelse: kantboks;
}
kropp {
bakgrunnsfarge: #d9d9d9;
høyde: 100vh;
vise: bøye seg;
align-elementer: senter;
rettferdiggjøre-innhold: senter;
}
.forelder {
posisjon: slektning;
}
.inngang {
disposisjon: ingen;
grense: ingen;
grense-radius: 100px;
polstring: 5px 10px;
bredde: 40px;
overgang: bredde 0.3sletthet;
}
.inngang::plassholder {
farge: grønn;
}
.forelder.aktiv.inngang {
bredde: 200px;
}
.btn {
bredde: 40px;
polstring: 5px 10px;
markøren: pekeren;
grense-radius: 100px;
grense: ingen;
bakgrunn: grønn;
vise: på linje;
boks-skygge: 0 0 5pxrgba(0, 0, 0, 0.2);
posisjon: absolutt;
topp: 0;
venstre: 0;
overgang: forvandle 0.3sletthet;
}
.forelder.aktiv.btn {
forvandle: translateX(210px);
}
.fa-solid {
farge: #ffffff;
}

Du bør ha en søkeknapp som ser slik ut:

Legg til JavaScript-funksjonalitet

Deretter skriver du JavaScript-kode for elementene. Først velger du overordnede, inndata- og knappelementer ved hjelp av JavaScript querySelector() metode.

Deretter legger du til en klikkhendelseslytter til knappen. Så når den klikkes, veksler knappen i henhold til den valgte klassen. Legg til fokus() metode for å sette fokus på det angitte elementet. Den begynner å blinke hver gang søkefeltet utvides.

la input = dokument.querySelector(".input");
la btn = dokument.querySelector(".btn");
la forelder = dokument.querySelector(".parent");
btn.addEventListener("klikk", () => {
 parent.classList.toggle("aktiv");
 input.focus();
});

Hvis du klikker på knappen, åpner den søkefeltet og omvendt. Det ser ut som vist i følgende diagram:

Nå, hvis du skriver inn informasjon og klikker på knappen, lukkes den mens systemet søker etter informasjonen.

Kult, ikke sant? Du kan se denne koden og leke med søkefeltet på codepen.io. Du kan tilpasse søkefeltet ytterligere ved å opprette en søkefeltliste av varer. Dette gjør det enklere for brukerne dine å søke i appen.

Andre funksjoner du kan lage

Som nybegynner innen webutvikling er det mange funksjoner du kan lage med HTML, CSS og JavaScript. Du kan lage et popup-/modalt vindu, en bildeglidebryter, en automatisk oppdatering av bunntekst og mange flere.

Slike kreative prosjekter er flotte for å lære programmeringskonsepter. Du får bruke ferdigheter etter hvert som du lærer dem, noe som øker nytten av ferdigheten. Du får også lage flotte brukergrensesnitt som du og brukerne dine vil like. Bruk denne veiledningen til å lage en skjult søkelinje og andre interaktive funksjoner for nettstedet ditt.