Оптимизация строки фильтра
Всех приветствую!
Есть скрипт, который РАБОТАЕТ! Но он работает если количество значений исчисляется десятками... А в "боевом варианте" их должны быть тысячи. В этом случае скрипт выдаёт желаемый результат. Но ему требуются минуты. Подскажите, как оптимизировать? (если это вообще возможно) - до 2-3 секунд. Если невозможно - то какими ещё средствами/методами достичь желаемого результата? Скрипт: /* Выпадающий список с фильтром */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } /* Сам фильтр */ function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); var limit = 3; var arr = []; for(var i = 0; i < a.length; i++) { if (a[i].innerHTML.toUpperCase().includes(filter)) { arr.push(a[i]) } else { a[i].style.display = 'none' } } for (var i = 0; i < arr.length; i++) { if (i >= limit) { arr[i].style.display = 'none' } else { arr[i].style.display = '' } } if (!input.value.length) { for (var i = 0; i < a.length; i++) { a[i].style.display = '' } } } Весь html, в который он встроен: <!DOCTYPE html> <html class="client-nojs" lang="ru" dir="ltr"> <head> <meta charset="UTF-8"/> <title>Фильтр</title> <script> /* Выпадающий список с фильтром */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } /* Сам фильтр */ function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); var limit = 3; var arr = []; for(var i = 0; i < a.length; i++) { if (a[i].innerHTML.toUpperCase().includes(filter)) { arr.push(a[i]) } else { a[i].style.display = 'none' } } for (var i = 0; i < arr.length; i++) { if (i >= limit) { arr[i].style.display = 'none' } else { arr[i].style.display = '' } } if (!input.value.length) { for (var i = 0; i < a.length; i++) { a[i].style.display = '' } } } </script> <style> * { box-sizing: border-box; } body { background-color: #f0f0f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* скрытый блок позиционируется абсолютно, чтобы не оставлять пустое место */ .toggler__content-box { position: absolute; transform: translate(9999px); opacity: 0; } /* скрываем checkbox */ .toggler__checkbox { display: none; } /* все DIV с inline в одну строчку */ .inline { display: inline; } /*Строка поиска и результаты в выпадающем списке*/ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } /*Строка поиска*/ #myInput { border-box: box-sizing; background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 0 0 0 15px; margin: 5px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position: relative; display: inline-block; width: 100%; } /*Выпадающий список*/ .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; width: 95%; max-height: 295px; /*Ограничение списка в высоту*/ overflow: auto; border: 1px solid #ddd; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} * {box-sizing: border-box;} /*Строка поиска*/ .d1 input { width: 95%; height: 42px; padding-left: 2px; border: 2px solid #7BA7AB; border-radius: 5px; outline: none; background: #F9F0DA; color: #9E9C9C; } /*Кнопка поиска*/ .d1 button { position: absolute; top: 0; right: 0px; width: 42px; height: 42px; border: none; background: #7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer; margin: 5px 5px 10px 0; } </style> <!--Строка поиска--> <div class="dropdown"> <div class="d1"> <input onclick="myFunction()" type="text" placeholder="Введите слово" id="myInput" onkeyup="filterFunction()"> <button type="submit"></button> <div id="myInput" > <div id="myDropdown" class="dropdown-content"> <!--Список выпадающих значений--> <a href="#Вариант">Вариант</a> <a href="#Вариация">Вариация</a> <a href="#Варьировать">Варьировать</a> <a href="#Варьирование">Варьирование</a> </div> </div> </div> </div> </div></div> </div></div></div></div> <div class="container"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li><div id="Вариант"><div class="inline a111 item"><a>Вариант</a></li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li><div id=Вариация"><div class="inline a111 item"><a>Вариация</a></li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li><div id="Варьировать"><div class="inline a111 item"><a>Варьировать</a></li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li><div id="Варьирование"><div class="inline a111 item"><a>Варьирование</a></li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> </ul> </body> </html> Спасибо! |
Сначала то, что мне непонятно.
<li><div id="Вариант"><div class="inline a111 item"><a>Вариант</a></li> Что это за конструкция? Где </div>? Зачем там <a>...</a> без href? В #myDropdown список <a> фиксирован? Тогда можно сначала получить массив строк и поиск осуществлять в нем a = div.querySelectorAll('a') const sarr = [...a].map( a => a.textContent.toUpperCase()) А в самой фунции for(var i = 0; i < a.length; i++) { if (filter.length) { if (sarr[i].includes(filter)) { arr.push([i]); a[i].hidden = false; } else { a[i].hidden = true; } } else { a[i].hidden = false; } } Тогда и третий цикл (когда фильтр пустой) не нужен будет Вам точно нужно любое вхождение фильтра, а не с начала строки? Если только с начала, то лучше использовать startsWith , вместо includes |
Цитата:
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 04:31. |