Cuando solo queda un elemento en la lista de datos, quiero autocompletar la entrada y ocultar la lista de datos. Puedo lograr este último comportamiento cambiando la identificación como se muestra aquí . Sin embargo, parece demasiado brutal, y además arroja algunos errores en la consola (aunque funciona). ¿Existe una forma más elegante de ocultar una lista de datos?
Ejemplo de código a continuación y en este violín .
$(document).on('keyup', '#CarsInput', function(){ UpdateDropDown('CarsInput', 'Cars'); }); function UpdateDropDown(idInput, idlist) { var datalist = document.getElementById(idlist); var options = datalist.getElementsByTagName('option'); var search = document.getElementById(idInput); search.oninput = function () { var n_matches = 0; var Seleccionado; for(var i = 0; i < options.length; i++) { if (options[i].value.toLowerCase().includes(search.value.toLowerCase())) { n_matches++; if (n_matches===1) { Seleccionado=options[i].value; } else { Seleccionado=''; } } } if (n_matches===1) { $("#"+search.id).val(Seleccionado); //HERE! is there a more elegant way? datalist.id = ""; } else { //HERE! is there a more elegant way? datalist.id = idlist; } }; } .GeneralInputs { margin-top: 2rem; margin-left: 2rem; padding: 0.2rem 0.4rem; border: 1px solid #E5E3E3; border-radius: 6px; width: 200px; outline: none; transition: all 0.3s ease-out; } .GeneralInputs:focus { border: 1px solid #900; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <input type="search" list="Cars" class="GeneralInputs" id="CarsInput" onclick="this.select();" placeholder="car name here..."/> <datalist id="Cars"> <option value="Volvo"/> <option value="Volkswagen"/> <option value="Mitsubishi"/> <option value="Mini"/> <option value="Ford"/> </datalist>