Написал код, который из массива стран, выводит в алфавитном порядке выпадающий из инпута список-подсказок стран при вводе первой буквы в инпут. При вводе второй и т.д. букв список соответственно сокращается. Как можно заменить говнокод для выбора нужной страны из списка на нормальную функцию через обработчик событий? Дело в том, что он встраивает функцию в HTML (строка 68-70) через функцию (строка 81-83).
let input = document.getElementById('input'),
spans = document.getElementById('list').getElementsByTagName('span'),
list = document.getElementById('list'),
countryChoice,
reg,
selected;
//Привязываем изменение в инпуте по отжатию клавиши через обработчик событий
input.addEventListener('keyup', function() {
inputChange();//Активируем функцию отслеживания изменений в инпуте
});
//Функция отслеживания изменений в инпуте
function inputChange(e) {
e = e || window.event;
//Отслеживание нажатия стрелки вниз
if (e.keyCode === 40) {
selected = -1;
//Перебор выпадающего списка и перемещение по нему вниз стрелкой курсора
for (let i = 0; i <= spans.length; i++)
if (i in spans && spans[i].className === 'selected') {
spans[i].className = '';
selected = i;
}
selected++;
for (let i = 0; i <= spans.length; i++)
if (i in spans && i === selected) {
spans[i].className = 'selected';
}
//Отслеживание нажатия стрелки вверх
} else if (e.keyCode === 38) {
selected = spans.length;
//Перебор выпадающего списка и перемещение по нему вверх стрелкой курсора
for (let i = 0; i <= spans.length; i++)
if (i in spans && spans[i].className === 'selected') {
spans[i].className = '';
selected = i;
}
selected--;
for (let i = 0; i <= spans.length; i++)
if (i in spans && i === selected) {
spans[i].className = 'selected';
}
//Отслеживание нажатия Enter
} else if (e.keyCode === 13) {
//Перебор выпадающего списка и введение в инпут выбранной страны через Enter
for (let i = 0; i <= spans.length; i++)
if (i in spans && spans[i].className === 'selected') {
input.value = spans[i].textContent;
list.textContent = '';
}
} else {
list.textContent = '';
//Функция проверки выбранной страны на соответствие регулярному выражению
if (input.value.length > 0) {
countries.forEach(function(e, i) {
//Регулярное выражение
reg = new RegExp('^' + input.value, 'i');
//При соответствии регулярному выражению в HTML вставляется функция для выбора страны через клик
if (e.match(reg)) {
countryChoice = "choiceCountry('" + countries[i] + "')";
list.innerHTML += '<span onclick="' + countryChoice + '">' + countries[i] +
'</span><br />';
}
});
}
}
//Перебор выпадающего списка стран для смены курсора на указательный палец
for (let i = 0; i < spans.length; i++) {
spans[i].style.cursor = 'pointer';
}
//Задание переменной функции вывода выбранной по клику страны в инпут
choiceCountry = function(chosenCountry) {
input.value = chosenCountry;
list.textContent = '';
};
}
