Al ingresar texto en el campo de texto, ofrece valores similares mostrándolos en la lista desplegable. ¿Cómo podría moverme a través de él usando las teclas de flecha? ¿Y elegir algún valor presionando el botón Intro? ¿Algún consejo para mejorar mi código?
(function() { "use strict"; let inputField = document.getElementById('input'); let ulField = document.getElementById('suggestions'); inputField.addEventListener('input', changeAutoComplete); ulField.addEventListener('click', selectItem); function changeAutoComplete({ target }) { let data = target.value; ulField.innerHTML = ``; if (data.length) { let autoCompleteValues = autoComplete(data); autoCompleteValues.forEach(value => { addItem(value); }); } } function autoComplete(inputValue) { let destination = [ "A, 1", "B, 2", "C, 3", "D, 4", "E, 5", "F, 6", "A, 7", "B, 8", "C, 9", "D, 10" ]; return destination.filter( (value) => value.toLowerCase().includes(inputValue.toLowerCase()) ); } function addItem(value) { ulField.innerHTML = ulField.innerHTML + `<li>${value}</li>`; } function selectItem({ target }) { if (target.tagName === 'LI') { inputField.value = target.textContent; ulField.innerHTML = ``; } } })(); <input id="input" autocomplete> <ul id="suggestions"></ul>