Autocompletion in JavaScript

Nu gaan we autocompletion implementeren. Deze term verwijst naar een dropdown-hint bij het invoeren van tekst in een invoerveld. Laten we kijken naar een voorbeeld. Hieronder heb ik een invoerveld gemaakt waarin je de naam van een land kunt invoeren. Als je enkele letters invoert, verschijnt er onder het invoerveld een lijst met landen die beginnen met de ingevoerde tekst.

Optioneel kun je, om de landnaam niet helemaal te hoeven intoetsen, met de muis op een land klikken en het verschijnt in het invoerveld. Dit is, in het algemeen, waar autocompletion voor dient. In het voorbeeld heb ik voor de eenvoud slechts drie landen gemaakt: Belarus, Belgium en Bulgaria. Voer in het onderstaande invoerveld eerst het Engelse teken 'B' in, en daarna 'e' en kijk wat er gebeurt:

Discussie

Laten we bespreken hoe we het probleem moeten aanpakken. We moeten een array maken met namen van landen. De mijne is als volgt:

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

Bij het invoeren van tekst in het invoerveld moet bij elke ingevoerde teken de array met landen worden doorlopen en moeten de landen worden verkregen die beginnen met de ingevoerde tekst. Dit kan handig worden gedaan met de methoden filter en startsWith.

Met filter kun je een array krijgen van landen die beginnen met de ingevoerde tekst. Vervolgens moet deze array worden doorlopen met een lus en de lijst ul worden gevuld met list items (li's) van de landen. En dit moet worden gedaan bij elke ingevoerde teken, waarbij eerst de eerder gemaakte list items uit de ul worden verwijderd.

Voor uw gemak geef ik hier de voltooide opmaak:

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

Kopieer de gegeven HTML- en CSS-codes. Implementeer autocompletion volgens het beschreven algoritme.