[DVV]

Написал код, который из массива стран, выводит в алфавитном порядке выпадающий из инпута список-подсказок стран при вводе первой буквы в инпут. При вводе второй и т.д. букв список соответственно сокращается. Как можно заменить говнокод для выбора нужной страны из списка на нормальную функцию через обработчик событий? Дело в том, что он встраивает функцию в 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 = '';
  };
}