通过JavaScript过滤ul列表没有正确过滤列表
通过JavaScript过滤ul列表没有正确过滤列表
提问于 2018-02-14 06:30:23
我正在尝试为ul实现一个过滤器列表，但是我的JavaScript函数似乎不能接受输入并过滤该列表。我不太确定为什么会发生这种情况。我还尝试将for循环更改为for (i = 0; i < ul.length; i++)，以搜索ul，但它似乎也没有响应。
HTML：
<input type="text" id="myMovies" onkeyup="searchTitle()" placeholder="Is your movie on here?">
<ul id="movieList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>Javascript：
function searchTitle(){
var input, filter, ul, li, a, i;
input = document.getElementById("myMovies");
filter = input.nodeValue.toUpperCase();
ul = document.getElementById("movieList");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++){
a = li[i].getElementsByTagName("a"[0]);
if (a.innerHTML.toUpperCase().indexof(filter) > -1) {
li[a].style.display = "";
}
else{
li[a].style.display = "Not found";
}
}
}回答 2
Stack Overflow用户
发布于 2018-02-14 06:35:32
也许你有a = li[i].getElementsByTagName("a"[0]);的地方有一个拼写错误，也许你想做a = li[i].getElementsByTagName("a")[0];
Stack Overflow用户
发布于 2018-02-14 06:47:35
这是一个示例，它实现了您似乎正在尝试的东西。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function searchTitle(){
var input, filter, ul, li, a, i;
input = document.getElementById("myMovies");
filter = input.value.toUpperCase();
window.status = filter;
ul = document.getElementById("movieList");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++){
a = li[i];
if (a.textContent.toUpperCase().indexOf(filter) > -1) {
a.style.display = "";
}
else{
a.style.display = "none";
}
}
}
</script>
</head>
<body>
<input type="text" id="myMovies" onkeyup="searchTitle()" placeholder="Is your movie on here?">
<ul id="movieList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48776766
复制相关文章
相似问题