Чтобы эффективно соединить виртуализацию (виртуальный скролл) с поиском и фильтрацией данных на фронтенде, нужно учитывать несколько моментов:

Фильтрация и поиск должны работать на полном наборе данных, а не только на видимой части. Обычно это значит, что фильтрация происходит до виртуализации.
После применения фильтров и поиска формируется новый массив данных, который передаётся в компонент виртуализации.
Виртуализация рендерит только видимые элементы из этого отфильтрованного массива, что позволяет экономить ресурсы при большом количестве данных.

Пример на React с использованием react-window:

import { FixedSizeList as List } from 'react-window';
import { useState, useMemo } from 'react';

function FilteredVirtualList({ items }) {
  const [query, setQuery] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(query));
  }, [items, query]);

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Поиск" />
      <List
        height={400}
        itemCount={filteredItems.length}
        itemSize={35}
        width={300}
      >
        {({ index, style }) => (
          <div style={style}>{filteredItems[index].name}</div>
        )}
      </List>
    </>
  );
}

Таким образом, поиск и фильтрация работают на полном наборе данных, а виртуализация отвечает за производительный рендер только видимой части списка.

Как соединить виртуализацию с поиском и фильтрацией данных?