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

Question

[Дмитрий]

Нужно реализовать динамический поиск по заданному списку элементов на странице. Результаты выводить в другой список. Сделал так:

list.forEach(function(text, indx) {
	if( text.textContent.toUpperCase().includes(query) ) {
	$('#result').append('<li>'+text.textContent+'</li>');
  }
});

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

Если элементов >10.000, то начинает тормозить ввод запроса в поисковое поле и вывод результатов. Особенно если начинать поиск со слов "Статья ##". Мне нужно реализовать поиск по ~12.000 элементов. Хотя бы чтобы не блокировалось поле ввода. Подскажите, как можно оптимизировать?

Comments

[Spaceoddity]

1. ограничение на минимальное количество символов для запуска поиска прикрутите
2. https://medium.com/nuances-of-programming/%D1%87%D...

Answer 1

[Сергей Соколов]

1. Медленные «дорогие» — операции по изменению DOM дерева. Поэтому всякие реактивные фреймворки типа Vue, React – работают с Shadow DOM – отрисовывая в реальный DOM только изменения.

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

Итого: я бы прикрутил VueJS и компонент виртуальной прокрутки, например, tangbc/vue-virtual-scroll-list

Answer 2

[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);

Comments

[Артем]

Разве так не будет еще большая задержка?

[Артем]

+ большое число данных, которые будут лежать в памяти до своего вывода

[Frontend developer]

Артем, сравните, используя performance.now(). Если память важна, то лучше на сервере такое обрабатывать.

Answer 3

[Nam Zanilla]

Оптимизировать можно путем поиска на сервере, сомневаюсь что на клиенте вы что то реализуете для решения задачи, при том что на клиентской стороне устройство может быть с любыми характеристиками