Autocompletado en JavaScript

Ahora implementaremos autocompletado. Este término se refiere a una sugerencia desplegable al ingresar texto en un input. Veamos un ejemplo. A continuación he creado un input en el que se puede ingresar el nombre de un país. Al mismo tiempo, si se ingresan algunas letras, debajo del input aparecerá una lista de países que comienzan con la cadena ingresada.

Si se desea, para no tener que escribir completamente el nombre del país, se puede hacer clic con el mouse en cualquier país y aparecerá en el input. Para eso, en general, sirve el autocompletado. En el ejemplo, para simplificar, he incluido solo tres países: Belarus, Belgium y Bulgaria. Ingrese en el input provisto a continuación primero el carácter 'B' inglés, y luego 'e' y observe lo que sucede:

Discusión

Discutamos cómo resolver la tarea. Se necesita crear un array con los nombres de los países. El mío es el siguiente:

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

Al ingresar texto en el input, con cada entrada de un carácter se debe recorrer el array de países y obtener los países que comienzan con la cadena ingresada. Esto es conveniente hacerlo con los métodos filter y startsWith.

Con filter se puede obtener un array de países que comienzan con la cadena ingresada. Luego se debe recorrer este array con un ciclo y llenar la lista ul con elementos li de los países. Y esto se debe hacer con cada ingreso de carácter, previamente eliminando de la lista ul los elementos li creados anteriormente.

Para su comodidad, proporciono el código HTML y CSS listos:

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

Copie los códigos HTML y CSS proporcionados. Implemente el autocompletado de acuerdo con el algoritmo descrito.