Несколько фильтров на странице

270

13 сентября 2021, 17:20

Есть следующая проблема. На js работает первый фильтр:

function test() {
    var input, filter, ul, li, i, a;
    input = document.getElementById('test1');
    filter = input.value.toUpperCase();
    ul = document.getElementsByTagName('ul');
    li = document.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";
        }
    }
}

И второй фильтр

function test1() {
    var input, filter, ul, li, i, a;
    input = document.getElementById('test2');
    filter = input.value.toUpperCase();
    ul = document.getElementsByTagName('ul');
    li = document.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";
        }
    }
}

Проблема в том, что фильтрация работает и по первому блоку и по второму одновременно. Есть ли возможность разделить фтльтр в зависимости от того, в какой инпут вводится текст, по тому блоку и должен происходить поиск

html код примерно такой:

<input type="text" onkeyup="test()" id="test1">
        <ul>
            <li>
                <a href="#">Яблоки</a>
            </li>
            <li>
                <a href="#">Апельсины</a>
            </li>
            <li>
                <a href="#">Груши</a>
            </li>
        </ul>
    <input type="text" onkeyup="test1()" id="test2">
        <ul>
            <li>
                <a href="#">Бананы</a>
            </li>
            <li>
                <a href="#">Киви</a>
            </li>
            <li>
                <a href="#">Ананас</a>
            </li>
        </ul>

Answer 1

Ну тут и одной функцией можно обойтись.

function test(e) { //стандартный цикл, поддерживается IE
    for (var m=e.nextElementSibling.querySelectorAll('li'),i=0,l=m.length;i<l;i++){
        var linkText = m[i].querySelector('a').innerHTML.toUpperCase();
        if (linkText.indexOf(e.value.toUpperCase())!=-1) m[i].style.display = "";
        else m[i].style.display = "none";
     }
}

function test(e) { //е - элемент который вызывал событие 
  e.nextElementSibling.querySelectorAll('li').forEach(t=>{ //получаем следующий элемент и проходим по всем li 
    var linkText = t.querySelector('a').innerHTML.toUpperCase(); //получаем текст ссылки внутри li 
    if (linkText.includes(e.value.toUpperCase())) t.style.display = ""; 
    else t.style.display = "none"; //если часть строки в поле ввода не совпадает с текстом ссылки 
  }); 
}

<input type="text" onkeyup="test(this)"> 
        <ul> 
            <li><a href="#">Яблоки</a></li> 
            <li><a href="#">Апельсины</a></li> 
            <li><a href="#">Груши</a></li> 
        </ul> 
 
<input type="text" onkeyup="test(this)"> 
        <ul> 
            <li><a href="#">Бананы</a></li> 
            <li><a href="#">Киви</a></li> 
            <li><a href="#">Ананас</a></li> 
        </ul>

Answer 2

const inputs = document.querySelectorAll('input'); 
 
inputs.forEach(function getInput(input) { 
  input.addEventListener('keyup', fork); 
}); 
 
 
function fork() { 
  if (this.id === 'test1') { 
    myFunction1(this.value); 
  } 
 
  if (this.id === 'test2') { 
    myFunction2(this.value); 
  } 
} 
 
function myFunction1(value) { 
  const items = document.querySelectorAll('.first-list__item'); 
  зоя_степановна(items, value); 
} 
 
 
function myFunction2(value) { 
  const items = document.querySelectorAll('.second-list__item'); 
  зоя_степановна(items, value); 
} 
 
function зоя_степановна(items, value) { 
  items.forEach(function getItem(item) { 
    item.innerText === value ? 
      item.style.textDecoration = 'line-through' : 
      item.style.textDecoration = 'none'; 
  }) 
}

<input type="text" id='test1'> 
<ul class="first-list"> 
  <li class="first-list__item">one</li> 
  <li class="first-list__item">two</li> 
  <li class="first-list__item">three</li> 
</ul> 
 
<input type="text" id='test2'> 
<ul class="second-list"> 
  <li class="second-list__item">one</li> 
  <li class="second-list__item">two</li> 
  <li class="second-list__item">three</li> 
</ul>