Autocomplétion en JavaScript

Nous allons maintenant implémenter l'autocomplétion. Ce terme désigne l'affichage d'une suggestion déroulante lors de la saisie de texte dans un champ de saisie. Regardons un exemple. Ci-dessous, j'ai créé un champ de saisie dans lequel vous pouvez entrer le nom d'un pays. En même temps, si vous entrez certaines lettres, une liste de pays commençant par la chaîne saisie apparaîtra sous le champ.

Si vous le souhaitez, pour ne pas avoir à saisir le nom du pays en entier, vous pouvez cliquer avec la souris sur n'importe quel pays et il apparaîtra dans le champ. C'est, en général, à cela que sert l'autocomplétion. Dans l'exemple, pour plus de simplicité, j'ai mis seulement trois pays : Belarus, Belgium et Bulgaria. Saisissez dans le champ ci-dessous d'abord la lettre 'B' (anglais), puis 'e' et observez ce qui se passe :

Discussion

Discutons de la manière de résoudre le problème. Il faut créer un tableau avec les noms des pays. Le mien est le suivant :

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

Lors de la saisie de texte dans le champ, à chaque frappe d'un caractère, il faut parcourir le tableau des pays et obtenir les pays qui commencent par la chaîne saisie. C'est pratique à faire avec les méthodes filter et startsWith.

Avec filter, on peut obtenir un tableau de pays commençant par la chaîne saisie. Ensuite, il faut parcourir ce tableau avec une boucle et remplir la liste ul avec des éléments de liste (li) contenant les pays. Et il faut faire cela à chaque saisie de caractère, en supprimant au préalable les éléments de liste précédemment créés de la liste ul.

Pour votre commodité, je joins le code HTML/CSS prêt à l'emploi :

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

Copiez les codes HTML et CSS fournis. Implémentez l'autocomplétion selon l'algorithme décrit.