When entering text in text field it offers similar values by showing them in dropdown list. How could I move through it using arrow keys? And pick some value by pressing enter button? Any hints for improving my code?
(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>