Как лучше реализовать автокомплит на js?

Question

[Fierfoxik]

делаю реализацию автокомплита и возникло 3 вопроса .

1. Как лучше делать проверку на получение данных, обычно проверкой или же reject в промисе?
   
2. Таким образом я же могу проверять первые введенные буквы с первыми буквами в принимаемой строке? if (full.indexOf(chunk) !== 0) или же стоит сделать так full.substr(0, chunk.length) === chunk
   
3. Как ограничить появление результата и показывать только 5 результатов а если кол-во отфильтрованных результатов больше 20 то 20 результатов
   
   

codepen

function loadAndSortTowns() {
    return new Promise(function(resolve) {
        let url = ' https://raw.githubusercontent.com/smelukov/citiesTest/master/cities.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();

    })
}

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

let filterInput = document.querySelector('#filter-input'),
    filterResult = document.querySelector('#filter-result');

loadAndSortTowns().then(function (data) {
    filterInput.addEventListener('keyup', function() {
        let value = this.value.trim(),
            htmlText = '';

        if (value.length > 0){
             for (let i= 0; i<data.length; i++) {
                if (isMatching(data[i].name, value)) {
                    checkArray.push(data[i].name);
                    if(checkArray.length <5 ){
                        htmlText += '<div>' + data[i].name+ '</div>';
                    }else{

                    checkArray = []
                    }
                    console.log(checkArray)
                }
            }
        }
        filterResult.innerHTML = htmlText;


    });
});

Answer 1

[Владимир]

В качестве альтернативы: https://jqueryui.com/autocomplete/ не сгодится?

Comments

[Fierfoxik]

Увы, нужно без плагинов все сделать)