0

Есть следующая проблема. На 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>
5
  • Добавьте HTML код
    – mbfilipp
    14 окт 2019 в 19:23
  • @ mbfilipp Добавил код
    – Grimm
    14 окт 2019 в 20:34
  • Увидел причину. Я использовал одну и туже функцию для разных блоков. Только появилась новая беда. В каком бы поле я не вводил текст фильтр происходит сразу по 2 блокам. Можно ли как то их разделить? Что бы вводя текст в 1 инпут поиск производился только по первому блоку и отдельно со 2 инпутом и блоком?
    – Grimm
    14 окт 2019 в 20:49
  • Вы находите все li на странице. Присвойте для ul разные классы и ищите в них li. Проблема в li = document.getElementsByTagName('li');
    – ccxdec
    14 окт 2019 в 21:00
  • @ANYWAYCODE чего-то не получилось или в IE не работает или у меня знаний не хватает
    – Grimm
    14 окт 2019 в 21:32

2 ответа 2

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>

5
  • Так не работает фильтрация в IE
    – Grimm
    15 окт 2019 в 7:57
  • 1
    Да, IE много чего не поддерживает, можно обойтись тогда стандартным циклом function test(e) { 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"; }
    – Max
    15 окт 2019 в 8:27
  • А у вас работает эта связка js и html в IE? Что то у меня фильтры не работают
    – Grimm
    15 окт 2019 в 22:17
  • 1
    Которая через цикл for работает.
    – Max
    16 окт 2019 в 0:24
  • Спасибо, заработало!
    – Grimm
    16 окт 2019 в 8:51
1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.