Форум

sw247 · #1 (**permalink**) 02.02.2022, 19:57

Всех приветствую!
Есть скрипт, который РАБОТАЕТ! Но он работает если количество значений исчисляется десятками... А в "боевом варианте" их должны быть тысячи. В этом случае скрипт выдаёт желаемый результат. Но ему требуются минуты. Подскажите, как оптимизировать? (если это вообще возможно) - до 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>

Спасибо!

voraa · #2 (**permalink**) 02.02.2022, 21:12

Сначала то, что мне непонятно.

<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

sw247 · #3 (**permalink**) 03.02.2022, 12:14

Цитата:

Что это за конструкция? Где </div>? Зачем там <a>...</a> без href?

Делал вырезку из основного кода, поэтому какие-то закрывающие div'ы мог не зацепить.

Цитата:

В #myDropdown список <a> фиксирован?

Выпадающий список слов - закрытый.

Цитата:

Вам точно нужно любое вхождение фильтра, а не с начала строки?

Да, нужно любое вхождение. Например, чтобы при вводе "определ" - выводилось и "определение" и "определённый" и "предопределённый".

Форум

Справочник

Discord чат

Курсы javascript