Как задавать элементу активный класс когда выводится один результат?

Question

[Fierfoxik]

Как итоговому результату фильтрации добавить активный класс?

Стоит ли делать проверку ошибки передачи данных с сервера через promise reject или как сейчас просто проверять пришли ли данные в ответе запроса.

Как при клике на результат, добавлять класс или серый цвет. И если был выбран другой результат то убрать цвет или класс. А так же очищать блок с подсказками(innerHtml полностью очищает, но новые данные почему то более не создаются там)

И что можно сделать по рефакторингу кода?
codepen

function loadAndSortTowns() {
    return new Promise(function(resolve) {
        let url = 'https://serjo96.github.io/fe-shop/kladr.json';
        var req = new XMLHttpRequest();
        req.open('GET', url , true);
        req.responseType = 'json';
        req.addEventListener('load', function() {
            var resp = req.response;
            if (resp) {
                resp.sort(function(a, b) {
                    if (a.name > b.name) {
                        return 1
                    } else {
                        return -1
                    }
                });
                resolve(resp);
            } else {
               document.getElementById('filter-result').innerHTML = 'Что то пошло не так. Проверьте соеденинеие с интернетом и попробуйте еще раз'
           }
        });

        req.send();

    })
}

let homeworkContainer = document.querySelector('#homework-container'),
    filterInput = homeworkContainer.querySelector('#filter-input'),
    filterResult = homeworkContainer.querySelector('#filter-result'),
    filterList = homeworkContainer.querySelector('.filter-list'),
    info = homeworkContainer.querySelector('.info-block'),
    filtrFocusOut;

function checkFiltrStatus (array,count){
    if (array.length === 0){
        info.innerHTML = 'Не чего не найдено';
        filtrFocusOut = true;
    } else {
        filtrFocusOut = false;
        filterInput.parentNode.classList.remove('filter-erore');
        if(count > 1){
            info.innerHTML = 'Показано' + count + ' из ' + array.length + 'найденых городов. Увточните запрос, чтобы увидеть остальные'
        } else {
            info.innerHTML = ''
        }
    }
}

function isMatching(full, chunk) {
    full = full.toLowerCase();
    chunk = chunk.toLowerCase();
    if (full.substr(0, chunk.length) === chunk) {
        return true;
    } else {
        return false;
    }
}


loadAndSortTowns().then(function (data) {
    filterInput.oninput = function() {
        let value = this.value.trim(),
            htmlText = '',
            checkArray = [],
            count = 0;

        if (value.length > 0){
            for (let i= 0; i<data.length; i++) {
                if (isMatching(data[i].City, value)) {
                    checkArray.push(data[i].City);
                    if (checkArray.length <= 5) {
                        count++;
                        htmlText += '<div id=' + data[i].Id + ' ' + 'class="result__item">' + data[i].City + '</div>';
                    }
                } else {
                    checkFiltrStatus(checkArray, count, htmlText)
                }
            }

        } else {
            info.innerHTML = '';
        }

        filterResult.innerHTML = htmlText;

    };
});

filterList.onclick = function (e) {
    if ( e.target.className.indexOf('result__item') === 0){
        filterInput.value = e.target.innerHTML;
        e.target.classList.add('selected-city');
    }
};

filterInput.onchange = function (e) {
    if (filtrFocusOut) {
        e.target.parentNode.className += ' filter-erore';
        info.innerHTML = 'Выберите значение из списка';
    }
};

filterInput.onfocus = function(e){
    e.target.setSelectionRange(0, this.value.length);
};

Answer 1

[gleendo]

// loadAndSortTowns
const load = () => {};
const sortTowns = () => {};