Как эффективно фильтровать списки с JS?

Нужно фильтровать 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();
});
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
т.к. объектов много (~2000) при очистке фильтра страница подлагивает

Пагинацию сделайте - вместо двух тысяч будет отображаться одновременно несколько десятков.

Да и вообще, заставлять пользователей созерцать тысячи объектов, вне зависимости от скорости отрисовки - само по себе неправильно. Не может человек столько информации воспринять за один раз.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Фильтрация и отображение - две кардинально разные задачи при предоставлении контента.
По критерию поля поиска - отображаем первые 5 записей и кнопка "Ещё...".
По клику на кнопку - отображаем следующие 10 записей.
Ответ написан
alex-1917
@alex-1917
Фильтровать должен сервер по команде с фронта, там сотни миллионов элементов не проблема.
Зачем фильтровать на фронте?

Про 2000 элементов на странице помолчу в тряпочку.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы