为每个列表动态过滤列表

问题描述 投票:0回答:1

我有一个多重过滤器列表,我想在它们上方放置一个输入搜索过滤器,我如何过滤每个列表的列表,而不是乘以代码来为每个列表创建函数,我将尝试的方法放在这里:

function FilterPret() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('pretfilter');
filter = input.value.toUpperCase();
ul = document.getElementById("filter-ul-pret");
li = ul.getElementsByTagName('li');

for (i = 0; i < li.length; i++) {
  a = li[i].getElementsByTagName("label")[0];
  txtValue = a.textContent || a.innerText;
  if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

filters img

因此,我不想为每个过滤器列表都设置9个函数,因为这些过滤器是来自后端的,所以我想创建1个函数。

更新:HTML

<aside class="sidebar-tag filter tags shop by price ">
  <div class="widget">
     <h4>
      <span>Duritate </span>
      <a href="javascript:void(0)" class="clear" style="display:none">
      <i class="fas fa-times"></i>
      </a>
    </h4>
 <div class="widget-content">
  <input type="text" id="duritatefilter" class="myfilterinput" onkeyup="FilterPret()" placeholder="Cauta duritatea">
 <ul class="scroll-basic">
  <li><label for="val1">
   <input type="checkbox" id="val1" value="100-300"><span>Moale</span></label>
  </li>
  <li><label for="val1"><input type="checkbox" id="val1" value="100-300">
      <span>Mediu</span></label>
  </li>
  <li><label for="val1"><input type="checkbox" id="val1" value="100-300">
   <span>Tare</span>  </label>
  </li>
 </ul>
</div>

javascript jquery
1个回答
0
投票

对于每个id使用不同的ul,并在keyup事件中将其作为参数传递给FilterPret()函数。然后,将静态值filter-ul-pret传递给id并收集列表项。

© www.soinside.com 2019 - 2024. All rights reserved.