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

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


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

Если элементов >10.000, то начинает тормозить ввод запроса в поисковое поле и вывод результатов. Особенно если начинать поиск со слов "Статья ##". Мне нужно реализовать поиск по ~12.000 элементов. Хотя бы чтобы не блокировалось поле ввода. Подскажите, как можно оптимизировать?
  • Вопрос задан
  • 279 просмотров
Пригласить эксперта
Ответы на вопрос 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
Оптимизировать можно путем поиска на сервере, сомневаюсь что на клиенте вы что то реализуете для решения задачи, при том что на клиентской стороне устройство может быть с любыми характеристиками
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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