Javascript函数过滤三个不同的列表

Question

我对 javascript 完全陌生，所以请原谅我的新手。

我希望根据文本框中输入的内容过滤三个不同的列表。我的函数仅对第一个列表进行排序，并且仅当我“按 Id 获取元素”而不是类时进行排序。

我的想法是按类获取元素，从而过滤所有三个列表，但它并不完全那样工作。我能做些什么？

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>

Answer 1

我建议您使用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。

Answer 2

我写它主要是为了看看我会写什么。我在这里发布了以防有人感兴趣。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>