Как ограничить количество результатов поиска в JavaScript для ускорения работы в браузере?

Оффтоп javascript
1

У меня есть поисковая строка на JavaScript, которая работает с базой данных в формате .js файла. После добавления около 20000 записей и соответствующих ссылок возникла проблема с производительностью. На мобильных устройствах все работает быстро и без проблем, а вот на десктопе браузер сильно тормозит - иногда до 15 секунд после первого нажатия клавиши. Хочу ограничить вывод результатов поиска примерно 25 элементами вместо показа всего списка. Думаю, что проблема в рендеринге большого количества HTML элементов на десктопе. Тестирую пока только в Firefox.

Пробовал несколько вариантов решения:

  1. Заменил строку for (i = 0; i < listItems.length; i++) на for (i = 0; i < 25; i++) - не сработало, поиск выполнялся только по первым 25 элементам вместо поиска по всему списку с ограничением вывода.

  2. Добавил let list = document.getElementById('list').max = "25"; - поиск вообще перестал работать.

Вот мой код:

function findResults() {
  let container = document.getElementById('resultsList');
  let items = document.getElementsByClassName('searchItem');
  let searchInput = document.getElementById('searchField').value;
  searchInput = searchInput.toLowerCase();
  let hasResults = false;
  
  for (let j = 0; j < items.length; j++) {
    if (!items[j].innerHTML.toLowerCase().includes(searchInput) || searchInput === "") {
      items[j].style.display = "none";
      continue;
    } else {
      items[j].style.display = "block";
      hasResults = true;
    }
  }
  
  container.style.display = hasResults ? "block" : "none";
}

function initializeData() {
  let products = [
    'Фильтр воздушный для двигателя Kohler 25-083-01-S',
    'Масляный фильтр для Briggs Stratton 492932S',
    'Внутренний воздушный фильтр Kohler 25-083-04-S',
    'Фильтр трансмиссии Exmark 1-513211',
    'Топливный фильтр John Deere AT17387',
    'Воздушный фильтр John Deere AT171853'
  ];
  
  let urls = [
    '/filter-air-kohler/',
    '/filter-oil-briggs/',
    '/filter-inner-kohler/',
    '/filter-transmission-exmark/',
    '/filter-fuel-deere/',
    '/filter-air-deere/'
  ];
  
  let resultsList = document.getElementById('resultsList');
  
  products.forEach((item, idx) => {
    let linkElement = document.createElement("a");
    linkElement.innerText = item;
    linkElement.href = `shop${urls[idx]}`;
    linkElement.classList.add("searchItem");
    resultsList.appendChild(linkElement);
  });
}

Как правильно ограничить количество отображаемых результатов, сохранив поиск по всей базе данных?

2

Проблема в том, что ты показываешь все найденные элементы. Добавь счетчик видимых результатов прямо в цикл поиска:

let visibleCount = 0;
for (let j = 0; j < items.length; j++) {
    if (!items[j].innerHTML.toLowerCase().includes(searchInput) || searchInput === "") {
        items[j].style.display = "none";
    } else if (visibleCount < 25) {
        items[j].style.display = "block";
        visibleCount++;
        hasResults = true;
    } else {
        items[j].style.display = "none";
    }
}

Так поиск будет по всей базе, но покажет только первые 25 совпадений.

3

А ты пробовал виртуализацию? Вместо скрытия элементов через display:none лучше вообще не создавать лишние DOM-элементы. Создавай только те 25 результатов которые нужно показать. Или используй document fragment для оптимизации. Кстати, интересно почему на мобилках быстрее работает чем на десктопе, обычно наоборот бывает?