Нужно фильтровать Ul по значению из Input. На данный момент делаю всё тупым перерисовыванием, но т.к. объектов много (~2000) при очистке фильтра страница подлагивает. Есть ли какой-то другой, более эффективный способ отфильтровать список?
// Часть функций опущена за ненадобностью
let data_list = [];
// Функция отрисовки списка в DOM
let drawDataList = function(list) {
document.querySelector("#list_data ul").innerHTML = ""
let renderedHTML = "";
list.forEach(data => {
let aid = data.aid;
let title = data.title;
renderedHTML += `<li data-aid=${aid}>${title}</li>`;
});
document.querySelector("#list_data ul").innerHTML = renderedHTML;
}
let init = function() {
getDataList((datas) => {
data_list = datas;
drawDataList(data_list);
});
}
document.addEventListener("DOMContentLoaded", function(event) {
...
// Когда Input меняется - надо отфильтровать список и перерисовать DOM
document.querySelector("input[type=search]").oninput = function(event) {
if (data_list.length === 0) return;
let nlist = data_list.filter((e) => {
return e.title.indexOf(this.value) > -1;
});
drawDataList(nlist);
};
init();
});
