Autofærdiggørelse i JavaScript

Nu skal vi implementere autofærdiggørelse. Denne term forstås som en drop-down hjælp når der indtastes tekst i et inputfelt. Lad os se på et eksempel. Nedenfor har jeg lavet et inputfelt, hvor man kan indtaste et landenavn. Samtidig, hvis man indtaster nogle bogstaver, vil der under inputfeltet vises en liste over lande, som starter med den indtastede streng.

Efter ønske kan man, for at undgå at indtaste hele landenavnet, klikke med musen på ethvert land og det vil vises i inputfeltet. Dette er, generelt set, hvorfor autofærdiggørelse er nødvendigt. I eksemplet har jeg for enkelheds skyld kun lavet tre lande: Belarus, Belgium og Bulgaria. Indtast i inputfeltet nedenfor først tegnet 'B' (engelsk), og derefter 'e' og se hvad der sker:

Diskussion

Lad os diskutere, hvordan man løser opgaven. Det er nødvendigt at lave et array med landenavne. Mit ser sådan ud:

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

Ved indtastning af tekst i inputfeltet skal der ved hver tegnindtastning gennemgås arrayet med lande og man skal modtage lande, som starter med den indtastede streng. Dette kan bekvemt gøres ved hjælp af metoderne filter og startsWith.

Med filter kan man få et array af lande, der starter med den indtastede streng. Derefter skal man gennemgå dette array med en løkke og udfylde listen ul med li-elementer med landene. Og dette skal gøres for hvert indtastet tegn, efter først at have fjernet de tidligere oprettede li-elementer fra ul-listen.

For din bekvemmelighed tilføjer jeg den færdige markup:

<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-koder til dig selv. Implementer autofærdiggørelse i henhold til den beskrevne algoritme.