Det är enklare än du tror att bygga ditt eget sökfält för automatisk komplettering.
En sökfält är ett populärt användargränssnitt som många moderna webbplatser använder. Om du bygger en webbplats som innehåller någon typ av data kanske du vill att dina användare ska kunna söka efter specifika objekt.
Det finns många sätt du kan bygga en sökfält på. Du kan skapa komplexa sökfält som returnerar resultat baserat på flera filter, till exempel ett namn eller ett datum. Befintliga bibliotek kan hjälpa dig att implementera ett sökfält utan att bygga det från grunden.
Men du kan också skapa ett enkelt sökfält med vanilla JavaScript, som jämför en användares input med en lista med strängar.
Hur man lägger till gränssnittet för sökfältet
Din webbplats bör innehålla en inmatningsruta där dina användare kan ange texten som de vill söka efter. Ett sätt att göra detta är att använda en inmatningstagg och utforma den så att den ser ut som en sökfält.
- Skapa en mapp för att lagra din webbplats. Skapa en HTML-fil med namnet i mappen index.html.
- Fyll din fil med den grundläggande strukturen i ett HTML-dokument. Om du inte är bekant med HTML så finns det många HTML-kodexempel du kan lära dig för att hjälpa dig att komma igång.
<!doctype html>
<html lang="sv-USA">
<huvud>
<titel>Sökruta</title>
</head>
<kropp>
<div klass="behållare">
<!-- Webbsidans innehåll kommer hit-->
</div>
</body>
</html> - Lägg till en inmatningstagg i containerklassen div. Detta gör att användaren kan skriva in texten som de vill söka efter. Närhelst de anger ett nytt tecken kommer din webbplats att anropa sökfunktionen (). Du kommer att skapa den här funktionen i senare steg.
Attributet för autoslutförande säkerställer att en webbläsare inte lägger till sin egen rullgardinsmeny baserat på tidigare söktermer.<div klass="behållare">
<h2>Sök efter länder</h2>
<input id="sökruta" autocomplete="av" onkeyup="Sök()" typ="text"
namn="Sök" platshållare="Vad letar du efter?">
</div> - I samma mapp som din index.html skapar du en ny CSS-fil som heter styles.css.
- Fyll filen med stil för den övergripande webbsidan och sökfältet:
kropp {
marginal: 0;
stoppning: 0;
bakgrundsfärg: #f7f7f7;
}
* {
typsnittsfamilj: "Arial", sans serif;
}
.behållare {
stoppning: 100px 25%;
display: flex;
flex-riktning: kolumn;
linje-höjd: 2rem;
textstorlek: 1.2em;
Färg: #202C39;
}
#sökruta {
stoppning: 15px;
border-radie: 5px;
}
inmatning[typ=text] {
-webkit-övergång: bredd 0.15slätta-in-ut;
övergång: bredd 0.15slätta-in-ut;
} - I index.html, lägg till en länk till din CSS-fil inuti head-taggen och under titeltaggen:
<länk rel="stilmall" href="styles.css"> - Öppna index.html fil i en webbläsare och visa gränssnittet i sökfältet.
Hur man skapar liststrängar för sökfältet
Innan användaren kan söka måste du skapa en lista över tillgängliga objekt som de kan söka efter. Du kan göra detta med en rad strängar. Ett snöre är ett av många datatyper du kan använda i JavaScript, och kan representera en sekvens av tecken.
Du kan skapa den här listan dynamiskt med JavaScript, eftersom sidan laddas.
- Inuti index.html, under inmatningstaggen, lägg till en div. Denna div kommer att visa en rullgardinsmeny som innehåller en lista över objekt som matchar det användaren söker efter:
<div id="lista"></div> - I samma mapp som din index.html fil och styles.css fil, skapa en ny fil som heter script.js.
- Inuti script.js, skapa en ny funktion som heter loadSearchData(). Initiera en array inuti funktionen med en lista med strängar. Tänk på att detta är en liten statisk lista. En mer komplex implementering kommer att behöva ta hänsyn till att söka igenom större datamängder.
fungeraloadSearchData() {
// Data som ska användas i sökfältet
låta länder = [
'Australien',
'Österrike',
'Brasilien',
'Kanada',
'Danmark',
'Egypten',
'Frankrike',
'Tyskland',
'USA',
'Vietnam'
];
} - Inuti loadSearchData() och under den nya arrayen, hämta div-elementet som visar de matchande sökobjekten för användaren. Inuti list-div, lägg till en ankartagg för varje dataobjekt i listan:
// Hämta HTML-elementet i listan
låta lista = dokumentera.getElementById('lista');
// Lägg till varje dataobjekt som en märka
länder.för varje((land)=>{
låta a = dokumentera.createElement("a");
a.innerText = land;
a.classList.add("listobjekt");
lista.appendChild (a);
}) - I body-taggen av index.html, lägg till onload-händelseattributet för att anropa den nya loadSearchData()-funktionen. Detta kommer att ladda data när sidan laddas.
<body onload="loadSearchData()"> - I index.html, innan body-taggen slutar, lägg till en skripttagg för att länka till din JavaScript-fil:
<body onload="loadSearchData()">
<!-- Innehållet på din webbsida -->
<script src="script.js"></script>
</body> - I styles.css, lägg till lite stil i rullgardinsmenyn:
#list {
kant: 1px fast ljusgrå;
border-radie: 5px;
display: block;
}
.listobjekt {
display: flex;
flex-riktning: kolumn;
text-dekoration: ingen;
stoppning: 5px 20px;
svart färg;
}
.listobjekt:sväva {
bakgrundsfärg: ljusgrå;
} - Öppen index.html i en webbläsare för att se ditt sökfält och listan över tillgängliga sökresultat. Sökfunktionen fungerar inte än, men du bör se användargränssnittet som den kommer att använda:
Hur man skapar rullgardinsmenyn med matchande resultat i sökfältet
Nu när du har ett sökfält och en lista med strängar för användare att söka, kan du lägga till sökfunktionen. När användaren skriver in i sökfältet kommer endast vissa objekt i listan att visas.
- I styles.css, byt ut stilen för listan för att dölja listan som standard:
#list {
kant: 1px fast ljusgrå;
border-radie: 5px;
display: ingen;
} - I script.js, skapa en ny funktion som heter search(). Tänk på att programmet anropar denna funktion varje gång användaren anger eller tar bort ett tecken från sökfältet. Vissa applikationer kommer att behöva resor till en server för att hämta information. I sådana fall kan den här implementeringen sakta ner ditt användargränssnitt. Du kan behöva ändra implementeringen för att ta hänsyn till detta.
fungeraSök() {
// sökfunktionen går här
} - Inuti search()-funktionen hämtar du HTML div-elementet för listan. Hämta även HTML-ankartaggelementen för varje objekt i listan:
låta listContainer = dokumentera.getElementById('lista');
låta listItems = dokumentera.getElementsByClassName('listItem'); - Få indata som användaren skrev in i sökfältet:
låta input = dokumentera.getElementById('sökfält').value
input = input.toLowerCase(); - Jämför användarens input med varje objekt i listan. Till exempel, om användaren anger "a", kommer funktionen att jämföra om "a" finns i "Australien", sedan "Österrike", "Brasilien", "Kanada" och så vidare. Om det stämmer överens kommer det att visa objektet i listan. Om det inte matchar kommer det att dölja objektet.
låta inga resultat = Sann;
för (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="ingen";
Fortsätta;
}
annan {
listItems[i].style.display="böja";
inga resultat = falsk;
}
} - Om det inte finns några resultat alls i listan, dölj listan helt:
listContainer.style.display = inga resultat? "ingen": "blockera"; - Klicka på index.html fil för att öppna den i en webbläsare.
- Börja skriva i sökfältet. När du skriver kommer resultatlistan att uppdateras till att endast visa matchande resultat.
Använda en sökfält för att söka efter matchande resultat
Nu när du vet hur du skapar ett sökfält med strängval kan du lägga till fler funktioner.
Du kan till exempel lägga till länkar till dina ankartaggar för att öppna olika sidor beroende på vilket resultat användaren klickar på. Du kan ändra sökfältet för att söka igenom mer komplexa objekt. Du kan också modifiera koden för att fungera med ramverk som React.
