Есть следующая проблема. На 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>
li = document.getElementsByTagName('li');