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>