我正在创建一个带有实时列表过滤功能的简单 html 搜索框。用户将在搜索框中输入文本,列表将根据用户输入的数据进行过滤。我面临的问题是,在我使用代码隐藏“li”元素后,我的列表没有显示出来。至于隐藏列表部分,CSS 非常准确地发挥其功能,但查询功能并未列出结果。这是代码...
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
$(".menu-hide").show(); // <-- code to show the list
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
.menu-hide {
display: none;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL" class="menu-hide">
<li><a href="#">John</a></li>
<li><a href="#">Angela</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
抱歉,代码太长了,因为作为一名学生,我对提出问题很陌生。
最佳答案
那里的代码比需要的多很多,而且只有一行 jQuery,很容易消除。
此外,您的演示实际上并未加载 jQuery 库,因此这将是一个问题
这是一个重写,它保持与您的初始方法接近的东西,但使用 querySelectorAll
简化了 DOM 选择,并删除了不必要的库。
点击演示...
function myFunction() {
var filter = document.getElementById("myInput").value.toUpperCase().trim();
document.querySelector(".menu-hide").style.display = filter ? "block" : "none";
var a = document.querySelectorAll("#myUL li a");
for (var i = 0; i < a.length; i++) {
if (a[i].textContent.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
.menu-hide {
display: none;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL" class="menu-hide">
<li><a href="#">John</a></li>
<li><a href="#">Angela</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
这是对其进行重新设计以进一步缩短和简化它的方法。它使用 for-of
循环迭代集合,并使用条件运算符设置 .display
。
点击演示...
function myFunction() {
var filter = document.getElementById("myInput").value.toUpperCase().trim();
document.querySelector(".menu-hide").style.display = filter ? "block" : "none";
for (const a of document.querySelectorAll("#myUL li a")) {
a.style.display =
a.textContent.toUpperCase().includes(filter) ? "block" : "";
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: none;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL" class="menu-hide">
<li><a href="#">John</a></li>
<li><a href="#">Angela</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
关于javascript - 显示隐藏 <li> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48359854/