Как правильно реализовать поиск внутри select с большим списком значений?

Question

[Dubrovin]

Реализую поиск внутри выпадающего списка (как в select2).
Вначале делал по следующему алгоритму:
1. получал NodeList с опциями
2. фильтровал полученные опции (через array.filter) на соответствие значению в search input
3. удалял через removeChild все опции
4. добавлял через appendChild все опции, которые соответствуют фильтру
В результате когда элементов больше 1000 работает это ОООчень медленно, браузер фризит.
Потом сделал по такому алгориму:
1. Для каждой опции в NodeList если значение опции соответствует строке поиска (через innerText.toLowerCase().indexOf( search) !== -1), то сделать style.display block, если не соответствует - сделать style.display none.
Работать стало намного шустрей, но по-моему это "костыль", в том же select2 в результат поиска в dom выводятся только необходимые варианты.
Пожалуйста, подскажите, как правильно решить эту задачу? Как манипулировать DOM с максимальной производительностью чтобы не было фризов?
p.s. jQuery не использую, ответ прошу дать на ES6.

Comments

[ⓒⓢⓢ]

думается мне shadow dom по шустрее будет.
Перерисовка страницы будет один раз сразу всей ноды селекта.
А сейчас количество перерисовок = количеству элементов (1000 раз)

[Dubrovin]

JRK_DV, здравствуйте, да, спасибо, уже понял свою ошибку. Сделал через document.createDocumentFragment() и всё заработало очень шустро даже без дебаунседа.

Answer 1

[Филипп Гапоненко]

Можно попробовать такое решение:
1. Склонировать весь список при помощи cloneNode
2. Отфильтровать клон нужным образом.
3. Заменить оригинальный список на отфильтрованный клон.

Таким образом мы касаемся DOM всего два раза, а не на каждой итерации.
Стоит учесть, что при этом надо будет заново привязать события к элементам списка.