用于过滤三个不同列表的Javascript函数
用于过滤三个不同列表的Javascript函数
提问于 2020-12-10 03:30:40
我对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>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-10 03: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。
Stack Overflow用户
发布于 2020-12-10 06: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65223644
复制相关文章
相似问题
腾讯云开发者
