Autovervollständigung in JavaScript

Jetzt werden wir eine Autovervollständigung implementieren. Unter diesem Begriff versteht man einen Dropdown-Hinweis bei der Texteingabe in ein Input-Feld. Schauen wir uns ein Beispiel an. Unten habe ich ein Input-Feld erstellt, in das man einen Ländernamen eingeben kann. Wenn man einige Buchstaben eingibt, erscheint unter dem Input-Feld eine Liste von Ländern, die mit der eingegebenen Zeichenkette beginnen.

Bei Bedarf kann man, um den Namen des Landes nicht vollständig eingeben zu müssen, mit der Maus auf ein beliebiges Land klicken und es erscheint im Input-Feld. Dafür ist die Autovervollständigung im Allgemeinen gedacht. Im Beispiel habe ich der Einfachheit halber nur drei Länder gemacht: Belarus, Belgium und Bulgaria. Geben Sie in das untenstehende Input-Feld zuerst das englische Zeichen 'B' und dann 'e' ein und schauen Sie, was passiert:

Diskussion

Lassen Sie uns diskutieren, wie man die Aufgabe löst. Man muss ein Array mit den Namen der Länder erstellen. Meins sieht so aus:

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

Bei der Texteingabe in das Input-Feld muss bei der Eingabe jedes Zeichens das Array mit den Ländern durchsucht werden und es müssen Länder erhalten werden, die mit der eingegebenen Zeichenkette beginnen. Das ist bequem mit den Methoden filter und startsWith möglich.

Mit filter kann man ein Array von Ländern erhalten, die mit der eingegebenen Zeichenkette beginnen. Dann muss man dieses Array mit einer Schleife durchlaufen und die Liste ul mit Listenelementen (li) mit den Ländern füllen. Und das muss bei jeder Eingabe eines Zeichens gemacht werden, wobei zuvor die zuvor erstellten Listenelemente aus der ul-Liste gelöscht werden müssen.

Zu Ihrer Bequemlichkeit führe ich das fertige Markup an:

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

Kopieren Sie sich die angegebenen HTML- und CSS-Codes. Implementieren Sie die Autovervollständigung gemäß dem beschriebenen Algorithmus.