Autocompletamento in JavaScript

Ora implementeremo l'autocompletamento. Con questo termine si intende un suggerimento a discesa durante la digitazione di testo in un input. Diamo un'occhiata ad un esempio. Qui sotto ho creato un input in cui è possibile inserire il nome di un paese. In questo caso, se si inseriscono alcune lettere, sotto l'input apparirà un elenco di paesi che iniziano con la stringa inserita.

Se lo si desidera, per non dover digitare per intero il nome del paese, è possibile cliccare con il mouse su qualsiasi paese e questo apparirà nell'input. Questo, in generale, è lo scopo dell'autocompletamento. Nell'esempio, per semplicità, ho inserito solo tre paesi: Belarus, Belgium e Bulgaria. Inserite nell'input qui sotto prima il carattere 'B' inglese, e poi 'e' e guardate cosa succede:

Discussione

Discutiamo come risolvere il problema. È necessario creare un array con i nomi dei paesi. Il mio è questo:

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

Durante la digitazione del testo nell'input, ad ogni carattere inserito, è necessario scorrere l'array dei paesi e ottenere i paesi che iniziano con la stringa inserita. Questo è comodo da fare utilizzando i metodi filter e startsWith.

Con filter è possibile ottenere un array di paesi che iniziano con la stringa inserita. Successivamente è necessario scorrere questo array con un ciclo e riempire l'elenco ul con elementi li dei paesi. E questo deve essere fatto per ogni carattere inserito, preventivamente rimuovendo dall'ul gli li creati in precedenza.

Per vostra comodità, fornisco il markup pronto:

<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;
}

Copiate i codici HTML e CSS forniti. Implementate l'autocompletamento secondo l'algoritmo descritto.