Det er nemmere at bygge din egen autofuldførelsessøgelinje, end du tror.
En søgelinje er et populært UI-element, som mange moderne websteder bruger. Hvis du bygger et websted, der indeholder enhver form for data, vil du måske have, at dine brugere skal kunne søge efter specifikke elementer.
Der er mange måder, du kan bygge en søgelinje på. Du kan oprette komplekse søgelinjer, der returnerer resultater baseret på flere filtre, såsom et navn eller en dato. Eksisterende biblioteker kan hjælpe dig med at implementere en søgelinje uden at bygge den fra bunden.
Du kan dog også oprette en simpel søgelinje ved hjælp af vanilla JavaScript, der sammenligner en brugers input med en liste over strenge.
Sådan tilføjes brugergrænsefladen til søgelinjen
Dit websted skal indeholde et inputfelt, så dine brugere kan indtaste den tekst, de vil søge efter. En måde at gøre dette på er at bruge et input-tag og style det, så det ligner en søgelinje.
- Opret en mappe til at gemme dit websted. Inde i mappen skal du oprette en HTML-fil med navnet index.html.
- Udfyld din fil med den grundlæggende struktur i et HTML-dokument. Hvis du ikke er fortrolig med HTML, er der mange HTML-kodeeksempler du kan lære for at hjælpe dig med at komme op i fart.
<!doctype html>
<html lang="da-US">
<hoved>
<titel>Søgelinje</title>
</head>
<legeme>
<div klasse="beholder">
<!-- Websideindhold kommer her-->
</div>
</body>
</html> - Tilføj et input-tag inde i containerklassen div. Dette vil give brugeren mulighed for at indtaste den tekst, som de gerne vil søge efter. Når de indtaster et nyt tegn, vil dit websted kalde søgefunktionen (). Du vil oprette denne funktion i senere trin.
Autofuldførelsesattributten sikrer, at en browser ikke tilføjer sin egen dropdown-menu baseret på tidligere søgetermer.<div klasse="beholder">
<h2>Søg efter lande</h2>
<input id="søgelinjen" autofuldførelse="af" onkeyup="Søg()" type="tekst"
navn="Søg" pladsholder="Hvad kigger du efter?">
</div> - I samme mappe som din index.html fil, skal du oprette en ny CSS-fil kaldet styles.css.
- Udfyld filen med stil for den overordnede webside og søgelinjen:
krop {
margin: 0;
polstring: 0;
baggrundsfarve: #f7f7f7;
}
* {
skrifttype-familie: "Arial", sans serif;
}
.beholder {
polstring: 100px 25%;
display: flex;
flex-retning: kolonne;
line-højde: 2rem;
skriftstørrelse: 1.2em;
farve: #202C39;
}
#søgelinje {
polstring: 15px;
kant-radius: 5px;
}
input[type=tekst] {
-webkit-overgang: bredde 0.15slet ind-ud;
overgang: bredde 0.15slet ind-ud;
} - I index.html, tilføj et link til din CSS-fil inde i head-tagget og under titel-tagget:
<link rel="stilark" href="styles.css"> - Åbn index.html fil i en webbrowser, og se brugergrænsefladen på din søgelinje.
Sådan opretter du listestrengene til søgelinjen
Før brugeren kan søge, skal du oprette en liste over tilgængelige elementer, som de kan søge efter. Du kan gøre dette med en række strenge. En snor er en af de mange datatyper, du kan bruge i JavaScript, og kan repræsentere en sekvens af tegn.
Du kan oprette denne liste dynamisk ved hjælp af JavaScript, da siden indlæses.
- Inde index.html, under input-tagget, tilføje en div. Denne div vil vise en rullemenu, der vil indeholde en liste over elementer, der matcher det, brugeren søger efter:
<div id="liste"></div> - I samme mappe som din index.html fil og styles.css fil, skal du oprette en ny fil kaldet script.js.
- Inde script.js, opret en ny funktion kaldet loadSearchData(). Initialér et array inde i funktionen med en liste over strenge. Husk, at dette er en lille statisk liste. En mere kompleks implementering vil skulle tage højde for søgning gennem større datasæt.
fungereloadSearchData() {
// Data, der skal bruges i søgefeltet
lade lande = [
'Australien',
'Østrig',
'Brasilien',
'Canada',
'Danmark',
'Egypten',
'Frankrig',
'Tyskland',
'USA',
'Vietnam'
];
} - Inde i loadSearchData() og under det nye array skal du hente div-elementet, der viser de matchende søgeelementer til brugeren. Inde i listen div skal du tilføje et ankertag for hvert dataelement på listen:
// Hent HTML-elementet på listen
lade liste = dokument.getElementById('liste');
// Tilføj hvert dataelement som en tag
lande.for hver((land)=>{
lade a = dokument.createElement("a");
a.innerText = land;
a.classList.add("listeelement");
liste.appendChild (a);
}) - I kropsmærket af index.html, tilføj onload-hændelsesattributten for at kalde den nye loadSearchData()-funktion. Dette vil indlæse dataene, mens siden indlæses.
<kropsbelastning ="loadSearchData()"> - I index.html, før body-tagget slutter, skal du tilføje et script-tag for at linke til din JavaScript-fil:
<kropsbelastning ="loadSearchData()">
<!-- Din websides indhold ->
<script src="script.js"></script>
</body> - I styles.css, tilføj lidt styling til rullelisten:
#liste {
kant: 1px ensfarvet lysegrå;
kant-radius: 5px;
display: blok;
}
.listItem {
display: flex;
flex-retning: kolonne;
tekst-dekoration: ingen;
polstring: 5px 20px;
farve: sort;
}
.listItem:hover {
baggrundsfarve: lysegrå;
} - Åben index.html i en webbrowser for at se din søgelinje og listen over tilgængelige søgeresultater. Søgefunktionaliteten virker ikke endnu, men du bør se den brugergrænseflade, den vil bruge:
Sådan opretter du rullemenuen med matchende resultater i søgelinjen
Nu hvor du har en søgelinje og en liste over strenge, som brugerne kan søge i, kan du tilføje søgefunktionaliteten. Når brugeren indtaster i søgefeltet, vil kun visse elementer på listen blive vist.
- I styles.css, udskift stilen for listen for at skjule listen som standard:
#liste {
kant: 1px ensfarvet lysegrå;
kant-radius: 5px;
display: ingen;
} - I script.js, opret en ny funktion kaldet search(). Husk, at programmet kalder denne funktion, hver gang brugeren indtaster eller fjerner et tegn fra søgefeltet. Nogle applikationer skal ture til en server for at hente information. I sådanne tilfælde kan denne implementering bremse din brugergrænseflade. Du skal muligvis ændre implementeringen for at tage højde for dette.
fungereSøg() {
// søgefunktionalitet går her
} - Inde i search()-funktionen skal du hente HTML div-elementet til listen. Få også HTML-ankertag-elementerne for hvert element på listen:
lade listeContainer = dokument.getElementById('liste');
lade listItems = dokument.getElementsByClassName('listItem'); - Få det input, som brugeren har indtastet i søgefeltet:
lade input = dokument.getElementById('søgelinje').værdi
input = input.toLowerCase(); - Sammenlign brugerens input med hvert element på listen. For eksempel, hvis brugeren indtaster "a", vil funktionen sammenligne, hvis "a" er inde i "Australien", derefter "Østrig", "Brasilien", "Canada" og så videre. Hvis det matcher, vil det vise dette element på listen. Hvis det ikke passer, vil det skjule det pågældende element.
lade ingen resultater = rigtigt;
for (i = 0; jeg < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="ingen";
Blive ved;
}
andet {
listItems[i].style.display="bøje";
ingen resultater = falsk;
}
} - Hvis der slet ikke er nogen resultater på listen, skal du skjule listen fuldstændigt:
listContainer.style.display = ingen resultater? "ingen": "blok"; - Klik på index.html fil for at åbne den i en webbrowser.
- Begynd at skrive i søgefeltet. Mens du skriver, opdateres listen over resultater til kun at vise matchende resultater.
Brug af en søgelinje til at søge efter matchende resultater
Nu hvor du ved, hvordan du opretter en søgelinje med strengvalg, kan du tilføje mere funktionalitet.
For eksempel kan du tilføje links til dine ankertags for at åbne forskellige sider afhængigt af det resultat, brugeren klikker på. Du kan ændre din søgelinje for at søge gennem mere komplekse objekter. Du kan også ændre koden, så den fungerer med rammer som React.
