делаю реализацию автокомплита и возникло 3 вопроса .
- Как лучше делать проверку на получение данных, обычно проверкой или же reject в промисе?
- Таким образом я же могу проверять первые введенные буквы с первыми буквами в принимаемой строке? if (full.indexOf(chunk) !== 0) или же стоит сделать так full.substr(0, chunk.length) === chunk
- Как ограничить появление результата и показывать только 5 результатов а если кол-во отфильтрованных результатов больше 20 то 20 результатов
codepenfunction 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;
});
});