У меня есть поисковая строка на JavaScript, которая работает с базой данных в формате .js файла. После добавления около 20000 записей и соответствующих ссылок возникла проблема с производительностью. На мобильных устройствах все работает быстро и без проблем, а вот на десктопе браузер сильно тормозит - иногда до 15 секунд после первого нажатия клавиши. Хочу ограничить вывод результатов поиска примерно 25 элементами вместо показа всего списка. Думаю, что проблема в рендеринге большого количества HTML элементов на десктопе. Тестирую пока только в Firefox.
Пробовал несколько вариантов решения:
-
Заменил строку
for (i = 0; i < listItems.length; i++)
наfor (i = 0; i < 25; i++)
- не сработало, поиск выполнялся только по первым 25 элементам вместо поиска по всему списку с ограничением вывода. -
Добавил
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);
});
}
Как правильно ограничить количество отображаемых результатов, сохранив поиск по всей базе данных?