Как оптимизировать live search?

Question

[lexstile]

Есть массив объектов вида:

[
    {
      code: 'test',
      name: 'Тест',
    }
    // ...........
  ]

Делаю фильтр по нему, пример:

options.filter(({ name }) => name.includes(inputValue));

Ставлю на onChange input.
Но из-за большого объема (около 200 элементов) подтормаживает.
Можно ли как-то такой процесс оптимизировать?
Возможно какие-то функции для поиска подстроки в строке работают быстрее нежели includes?

Comments

[WbICHA]

В первую очередь поменять это:

options.filter(({ name }) => name.includes(inputValue));

На это:

options.filter((o) => o.name.includes(inputValue));

Твоя текущая запись эквивалентна этой:

options.filter((option) => {
  const name = option.name;
  return name.includes(inputValue));
});

Раньше сам был приверженцем такой записи, пока мне на этот момент не указали.)

[lexstile]

WbICHA, очень интересно, спасибо большое, не задумывался

Answer 1

[Vladimir Lewandowski]

Вам нужен debounce. Например, из lodash — lodash.com/docs/#debounce.

Answer 2

[xmoonlight]

На клиенте, если всё:
1. Regex
2. "Деревья"
3. Анаграммы