首頁猿問 Javascript函數過濾三個不...

Javascript函數過濾三個不同的列表

JavaScript

慕碼人2483693 2023-11-02 21:33:54

我對 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>

查看完整描述

2 回答

MM們

TA貢獻1886條經驗獲得超2個贊

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

反對回復 2023-11-02

弒天下

TA貢獻1818條經驗獲得超8個贊

我寫它主要是為了看看我會寫什么。我在這里發布了以防有人感興趣。

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();

? ? <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>

? ? <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>

? ? <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>

反對回復 2023-11-02

2 回答
0 關注
201 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript函數過濾三個不同的列表

Javascript函數過濾三個不同的列表

2 回答

添加回答