Todavía estoy aprendiendo javascript, actualmente estoy tratando de crear una barra de búsqueda con un campo de respuestas personalizadas. Esto está relacionado con la geocodificación. Cuando el usuario ingresa el nombre de una ciudad, el campo de retorno que aparece debajo de la barra de búsqueda debe devolver una lista de los 5 nombres de ciudades más cercanas, según un parámetro predefinido (puntuación, clasificación alfabética, etc.). Cada vez que el usuario ingresa una letra, se envía una solicitud al servicio web en cuestión. Esta solicitud se activa solo a partir de la tercera letra ingresada.

mi js

 function validUserInput () { geo.addEventListener("input", function (evt) { if (evt.target.value.length >= 3) { addokRequest(evt); Array.prototype.forEach.call(hideClass, function(elt) { elt.style.visibility = 'visible'; }) // hideClass.style.visibility = 'visible'; } else { // hide suggestions lists Array.prototype.forEach.call(hideClass, function(elt) { elt.style.visibility = 'hidden'; }) } }, false); } const geo = document.getElementById("geoCodeur"); validInputUser ();

mi html

 <label for="geoCodeur" class="visuallyHidden">GéoCodeur</label> <input type="search" class="" id="geoCodeur" placeholder="Lieu à rechercher" autofocus>

Sin saber cómo modificar/diseñar la respuesta de una entrada de usuario (la generada por defecto por el DOM), creé artificialmente una lista de elementos duros (5 etiquetas li) para acomodar las 5 respuestas retenidas para cada entrada. Carece de elegancia y no puedo diseñar correctamente esta lista (en particular, hacer que desaparezca cuando el campo de entrada está vacío).

¿Conoces el método correcto a utilizar para lograr mis fines?

¡Agradeciendo de antemano cualquier ayuda!

Y me disculpo de antemano por mi gramática inglesa (que no es mi lengua materna).