Как реализовать поиск на js?

Нужно реализовать динамический поиск по заданному списку элементов на странице. Результаты выводить в другой список. Сделал так:
list.forEach(function(text, indx) {
	if( text.textContent.toUpperCase().includes(query) ) {
	$('#result').append('<li>'+text.textContent+'</li>');
  }
});


Подробный пример на jsfiddle

Если элементов >10.000, то начинает тормозить ввод запроса в поисковое поле и вывод результатов. Особенно если начинать поиск со слов "Статья ##". Мне нужно реализовать поиск по ~12.000 элементов. Хотя бы чтобы не блокировалось поле ввода. Подскажите, как можно оптимизировать?
  • Вопрос задан
  • 243 просмотра
Пригласить эксперта
Ответы на вопрос 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
1. Медленные «дорогие» — операции по изменению DOM дерева. Поэтому всякие реактивные фреймворки типа Vue, React – работают с Shadow DOM – отрисовывая в реальный DOM только изменения.

2. в окно не влезет более, чем N результатов поиска. Поэтому незачем каждый раз сразу отрисовывать все 10 тыс. результатов поиска по букве "С", например. Достаточно первые N показать. Т.е. тут нужен компонент «виртуальной прокрутки» — который рисует только то, что видно, а скролл-баром имитирует всю длину имеющихся результатов.

Итого: я бы прикрутил VueJS и компонент виртуальной прокрутки, например, tangbc/vue-virtual-scroll-list
Ответ написан
Комментировать
@markak
Frontend developer
https://jsfiddle.net/khvobL3r/11/

let itemsStr = "";
list.forEach(function(text, indx) {
      if( text.textContent.toUpperCase().includes(query) ) {
      itemsStr += '<li>'+text.textContent+'</li>';
   }
});
$('#result').append(itemsStr);
Ответ написан
@sadsdasdasdsadsadsadsadsa
WEB developer
Оптимизировать можно путем поиска на сервере, сомневаюсь что на клиенте вы что то реализуете для решения задачи, при том что на клиентской стороне устройство может быть с любыми характеристиками
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Сбер Москва
от 220 000 ₽
от 3 000 до 4 500 €
NewGen Vision Санкт-Петербург
от 30 000 до 60 000 ₽
21 нояб. 2021, в 00:38
20000 руб./за проект
21 нояб. 2021, в 00:11
10000 руб./за проект
20 нояб. 2021, в 23:53
1500 руб./за проект