Still learning javascript, I am currently trying to create a Search bar with customs responses field. This is related to geocoding. When the user enters a city name, the return field that appears below the search bar should return a list of the 5 nearest city names, based on a predefined parameter (score, alphabetic sorting, and so on). Each time the user enters a letter, a request is sent to the web service concerned. This request is triggered only from the third letter entered.

My 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 ();

My HTML

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

Not knowing how to modify / style the response of a user input (the one generated by default by the DOM), I artificially created a list of hard elements (5 li tags) to accommodate the 5 responses retained for each input . It lacks elegance and I cannot properly style this list (in particular, making it disappear when the input field is empty).

Do you know the correct method to use to achieve my ends?

Thanking you in advance for any help!

And I apologize in advance for my English grammar (not my native language).