Autofullføring på JavaScript

Nå skal vi implementere autofullføring. Denne termen refererer til en nedfallsliste med forslag når tekst skrives inn i et inputfelt. La oss se på et eksempel. Nedenfor har jeg laget et inputfelt hvor man kan skrive inn navnet på et land. Hvis man skriver inn noen bokstaver, vil det dukke opp en liste over land som begynner på den innskrevne teksten under inputfeltet.

Om ønskelig kan man, for å unngå å skrive hele landets navn, klikke med musepekeren på et hvilket som helst land og det vil vises i inputfeltet. Dette er, generelt sett, hva autofullføring er til for. I eksempelet for enkelhets skyld har jeg kun tatt med tre land: Belarus, Belgium og Bulgaria. Skriv inn i inputfeltet nedenfor først tegnet 'B' (engelsk), og deretter 'e' og se hva som skjer:

Diskusjon

La oss diskutere hvordan vi løser denne oppgaven. Vi trenger å lage en array med landnavn. Min ser slik ut:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

Ved inntasting av tekst i inputfeltet må vi for hvert innskrevet symbol gå gjennom arrayen med land og hente land som begynner på den innskrevne teksten. Dette kan enkelt gjøres ved hjelp av metodene filter og startsWith.

Med filter kan man få en array med land som starter med den innskrevne teksten. Deretter må man gå gjennom denne arrayen med en løkke og fylle listen ul med li-elementer med landene. Dette må gjøres for hvert innskrevet symbol, og man må på forhånd fjerne de tidligere opprettede li-elementene fra u-listen.

For din bekvemmelighet tar jeg med den ferdige HTML-strukturen:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

Kopier de viste HTML- og CSS-kodene til deg. Implementer autofullføring i henhold til den beskrevne algoritmen.