我已经创建了三个OL，但在添加搜索时，它不能工作。请你检查一下是什么问题？
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ol id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Bob</a></li>
</ol>
<ol id="myUL2">
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
</ol>
<ol id="myUL3">
<li><a href="#">Anim</a></li>
<li><a href="#">Bitto</a></li>
<li><a href="#">Cindy</a></li>
</ol>
我使用的脚本如下。
function myFunction() {
var input, filter, ol, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ol = document.querySelectorAll("#myUL,#myUL2,#myUL3");
li = ol.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";
}
}
}
代码中的问题是什么？
我是用这行来从有序列表中获取所有的列表项。
li = document.querySelectorAll("ol li");
console.clear();
function myFunction() {
var input, filter, ol, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
li = document.querySelectorAll("ol 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";
}
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ol id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Bob</a></li>
</ol>
<ol id="myUL2">
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
</ol>
<ol id="myUL3">
<li><a href="#">Anim</a></li>
<li><a href="#">Bitto</a></li>
<li><a href="#">Cindy</a></li>
</ol>
</body>
</html>