Живой поиск не ищет в других списках пункты

Question

Есть простейший скрипт для живого поиска. Все прекрасно работает но только для одного элемента ul с классом 'menu'. А нужно делать поиск по всем спискам с этим классом. Как можно исправить этот недочет? Начинающий js разработчик не бейте :)

<h1>Live search</h1>
<div class="row">
    <div class="left" style="background-color: #bbb">
        <h2>Menu</h2>
        <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search" title="Type some text">
        <div class="block">
            <ul class="menu">
                <li> <a href="#">Html</a></li>

                <li class="li-search"> <a href="#">Html</a></li>
                <li class="li-search"> <a href="#">php</a></li>
                <li class="li-search"> <a href="#">css</a></li>
                <li class="li-search"> <a href="#">java</a></li>
                <li class="li-search"> <a href="#">c</a></li>
                <li class="li-search"> <a href="#">c++</a></li>
                <li class="li-search"> <a href="#">sql</a></li>
                <li class="li-search"> <a href="#">etc</a></li>
                
            </ul>
        </div>
        <div class="block">
            <ul class="menu2">
                <li> <a href="#">Html</a></li>
                <li class="li-search"> <a href="#">Html1</a></li>
                <li class="li-search"> <a href="#">php1</a></li>
                <li class="li-search"> <a href="#">css1</a></li>
                <li class="li-search"> <a href="#">java1</a></li>
                <li class="li-search"> <a href="#">c1</a></li>
                <li class="li-search"> <a href="#">c++1</a></li>
                <li class="li-search"> <a href="#">sql1</a></li>
                <li class="li-search"> <a href="#">etc1</a></li>
                
            </ul>
        </div>
    </div>
</div>

<script>

    function myFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("mySearch");
        filter = input.value.toUpperCase();
        ul = document.querySelector('.menu');
        li = ul.getElementsByTagName("li");

        for (i = 0; i<li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";

            }

            else {
                li[i].style.display ="none";
            }
        }
    }
    




</script>

Answer 1

Уберите onkeyup="myFunction()", это устарелый способ. Можно использовать следующий вариант:

mySearch.addEventListener('input', (e) => {
    let value = e.currentTarget.value.toLowerCase();
    let items = document.querySelectorAll('li'); // или '.menu li'
    items.forEach(item => {
        item.removeAttribute('style');
        if(value != item.innerText.toLowerCase().slice(0, value.length)) {
            item.style.display = 'none';
        }
    });
});

<h1>Live search</h1>
<div class="row">
    <div class="left" style="background-color: #bbb">
        <h2>Menu</h2>
        <input type="text" id="mySearch" placeholder="Search" title="Type some text">
        <div class="block">
            <ul class="menu">
                <li> <a href="#">Html</a></li>

                <li class="li-search"> <a href="#">Html</a></li>
                <li class="li-search"> <a href="#">php</a></li>
                <li class="li-search"> <a href="#">css</a></li>
                <li class="li-search"> <a href="#">java</a></li>
                <li class="li-search"> <a href="#">c</a></li>
                <li class="li-search"> <a href="#">c++</a></li>
                <li class="li-search"> <a href="#">sql</a></li>
                <li class="li-search"> <a href="#">etc</a></li>
                
            </ul>
        </div>
        <div class="block">
            <ul class="menu2">
                <li> <a href="#">Html</a></li>
                <li class="li-search"> <a href="#">Html1</a></li>
                <li class="li-search"> <a href="#">php1</a></li>
                <li class="li-search"> <a href="#">css1</a></li>
                <li class="li-search"> <a href="#">java1</a></li>
                <li class="li-search"> <a href="#">c1</a></li>
                <li class="li-search"> <a href="#">c++1</a></li>
                <li class="li-search"> <a href="#">sql1</a></li>
                <li class="li-search"> <a href="#">etc1</a></li>
                
            </ul>
        </div>
    </div>
</div>

Answer 2

function myFunction() {
  const searchListItems = document.querySelectorAll('.block li');
  const inputValue = document.getElementById('mySearch').value;
  const lowerCaseInputValue = inputValue.toLowerCase();
 
  searchListItems.forEach(item => {
    const itemText = item.innerText || '';
    const lowerCaseItemText = itemText.toLowerCase();
    if (lowerCaseItemText.includes(lowerCaseInputValue)) {
      item.style.display = null;
    } else {
      item.style.display = 'none';
    }
  })
}

<h1>Live search</h1>
<div class="row">
    <div class="left" style="background-color: #bbb">
        <h2>Menu</h2>
        <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search" title="Type some text">
        <div class="block">
            <ul class="menu">
                <li> <a href="#">Html</a></li>

                <li class="li-search"> <a href="#">Html</a></li>
                <li class="li-search"> <a href="#">php</a></li>
                <li class="li-search"> <a href="#">css</a></li>
                <li class="li-search"> <a href="#">java</a></li>
                <li class="li-search"> <a href="#">c</a></li>
                <li class="li-search"> <a href="#">c++</a></li>
                <li class="li-search"> <a href="#">sql</a></li>
                <li class="li-search"> <a href="#">etc</a></li>
                
            </ul>
        </div>
        <div class="block">
            <ul class="menu2">
                <li> <a href="#">Html</a></li>
                <li class="li-search"> <a href="#">Html1</a></li>
                <li class="li-search"> <a href="#">php1</a></li>
                <li class="li-search"> <a href="#">css1</a></li>
                <li class="li-search"> <a href="#">java1</a></li>
                <li class="li-search"> <a href="#">c1</a></li>
                <li class="li-search"> <a href="#">c++1</a></li>
                <li class="li-search"> <a href="#">sql1</a></li>
                <li class="li-search"> <a href="#">etc1</a></li>
                
            </ul>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Живой поиск не ищет в других списках пункты

Ответы (2 шт):