问用于过滤三个不同列表的Javascript函数
EN

Stack Overflow用户

提问于 2020-12-09 19:30:40

回答 2查看 78关注 0票数 1

我对javascript完全是个新手，所以请原谅我的无礼。

我希望根据文本框中键入的内容过滤三个不同的列表。我的函数只对第一个列表进行排序，而且只在"get element by Id“而不是class的时候。

我的想法是按类获取元素，从而过滤所有三个列表，但它并不是以这种方式工作的。我能做什么?

Javascript：

 <script>
    function filterList() {
        
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById('searchCombo');
        filter = input.value.toUpperCase();
        ul = document.getElementsByClassName("drugList");
        li = ul.getElementsByTagName('li');

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

HTML列表：

<input type="text" id="searchCombo" onkeyup="filterList()" placeholder="Search for names..">

<ul ID="list1" class="drugList">
    <li><a href="#">List 1 element 1</a></li>
    <li><a href="#">List 1 element 2</a></li>
    <li><a href="#">List 1 element 3</a></li>
</ul>

<ul ID="list2" class="drugList">
    <li><a href="#">List 2 element 1</a></li>
    <li><a href="#">List 2 element 2</a></li>
    <li><a href="#">List 2 element 3</a></li>
</ul>

<ul ID="list3" class="drugList">
    <li><a href="#">List 3 element 1</a></li>
    <li><a href="#">List 3 element 2</a></li>
    <li><a href="#">List 3 element 3</a></li>
</ul>

javascript

腾讯云推广大使邀新奖励

推荐好友上云最高获8万/月现金

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-09 19:44:42

我建议您使用Element.querySelectorAll()来过滤drugList类中的li元素。然后遍历元素：

const nothingFound = document.querySelector('.nothingFound');
nothingFound.style.display="none";
const searchCombo = document.getElementById('searchCombo');
searchCombo.addEventListener("keyup", (e)=> {
  const {value} = e.target;
  const liElements=Array.from(document.querySelectorAll(".drugList li"));
  let count = 0;
  liElements.forEach(li => {
    li.style.display = "none"
    if(li.textContent.toLowerCase().includes(value.toLowerCase())) {
      li.style.display = "";
      ++count;
    }
  });

  nothingFound.style.display = count > 0 ? "none": "";
});

    <input type="text" id="searchCombo" placeholder="Search for names..">

    <ul ID="list1" class="drugList">
        <li><a href="#">List 1 element 1</a></li>
        <li><a href="#">List 1 element 2</a></li>
        <li><a href="#">List 1 element 3</a></li>
    </ul>

    <ul ID="list2" class="drugList">
        <li><a href="#">List 2 element 1</a></li>
        <li><a href="#">List 2 element 2</a></li>
        <li><a href="#">List 2 element 3</a></li>
    </ul>

    <ul ID="list3" class="drugList">
        <li><a href="#">List 3 element 1</a></li>
        <li><a href="#">List 3 element 2</a></li>
        <li><a href="#">List 3 element 3</a></li>
    </ul>
  <span class="nothingFound">Nothing found in this category</span>

另外，你应该考虑使用css类而不是element.style.display。

票数 1

Stack Overflow用户

发布于 2020-12-09 22:22:43

我不确定这个答案是否有那么大的价值，它借鉴了@lissettdm的答案，我写它主要是为了看看我会写什么。我把它贴在这里，以防有人感兴趣。

const select_all = (selector, selectee = document) =>
  Array.from(selectee.querySelectorAll(selector));

const hide_item = item => item.style.display = 'none';
const show_item = item => item.style.display = '';
const item_text = item => item.textContent.toLowerCase() + ' ' + item.dataset.keywords;
const compare   = text => item => item_text(item).includes(text);
const has_class = class_name => item => item.className.includes(class_name);
const not_has_class = class_name => item => !has_class(class_name)(item);
const both = (pred_a, pred_b) => item => pred_a(item) && pred_b(item);

const filter_list = text => list => {
  const lis = select_all("li", list);
  
  let to_show = lis.filter(both( not_has_class('none'), compare(text) ));
  if(to_show.length === 0)
    to_show = lis.filter(has_class('none'));
  
  lis.forEach(hide_item);
  to_show.forEach(show_item);
};

const filter = (event) =>
  select_all(".drugList").forEach(
    filter_list((event?.target?.value || '').toLowerCase())
  );

document.getElementById('searchCombo').addEventListener("keyup", filter);

filter();

<input type="text" id="searchCombo" placeholder="Search for names..">

<ul ID="list1" class="drugList">
    <li data-keywords="additional keywords"><a href="#">List 1 element 1</a></li>
    <li data-keywords="bob fred"><a href="#">List 1 element 2</a></li>
    <li data-keywords="jane neela"><a href="#">List 1 element 3</a></li>
    <li class="none">Nothing found in this category</li>
</ul>

<ul ID="list2" class="drugList">
    <li><a href="#">List 2 element 1</a></li>
    <li><a href="#">List 2 element 2</a></li>
    <li><a href="#">List 2 element 3</a></li>
    <li class="none">Nothing found in this category</li>
</ul>

<ul ID="list3" class="drugList">
    <li><a href="#">List 3 element 1</a></li>
    <li><a href="#">List 3 element 2</a></li>
    <li><a href="#">List 3 element 3</a></li>
    <li class="none">Nothing found in this category</li>
</ul>