隐藏列表项如何筛选 HTML 搜索框

如何从过滤器html搜索框中隐藏列表项。

例如，它仅在我单击搜索框时显示项目，然后显示项目列表

否则，在正常编码中隐藏列表项。

阿黛勒
艾格尼丝
比利
鲍勃
加尔文
克里斯蒂娜
辛迪
凯迪
拉库姆
库尔
月亮
中午

如果有人可以纠正这一点，请。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
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;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</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>
<script>
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");
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";
}
}
}
</script>
</body>
</html>

如果有人可以纠正这一点，请。

您可以做的是在 DOM 准备就绪后隐藏 UL el，然后在焦点上设置输入字段时显示列表。使用 jquery 尝试下面的代码。

$(function(){
$('#myUL').hide();
$('#myInput').on('focus',function(){
$('#myUL').show();
});
})

如果您指的是您的"myUL"： - 向每个列表项添加一个类

<li class='people'>Adele</li>)

然后添加CSS组件以默认隐藏列表

.people { display： none;}

在 JavaScript 中：更改此部分：

if (a.innerHTML.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = "";
} else {
li[i].style.display = "none";
}

到(如果其他反转并过滤 =="(：

if (!(a.innerHTML.toUpperCase().indexOf(filter) > -1)) && filter == "")
{
li[i].style.display = "none";
} else {
li[i].style.display = "block";
}
}

嘿，我找到了一个解决方案，所有其他解决方案都不起作用，我尝试了所有这些解决方案。

这是解决方案：

给所有列表一个class="search-bar-items"(html中(
在CSS中写下这段代码。
.search-bar-items{ 显示：无; }

具有类名搜索栏项的列表

CSS 属性

你现在应该很好去

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
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;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</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>
<script>
var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");
// show the list when the input receive focus
searchBox.addEventListener("focus",  function(){
// UL.style.display = "block";
});
// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
UL.style.display = "none";
});

function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
ul = document.getElementById("myUL");
filter = input.value.toUpperCase();
// if the input is empty hide the list
if(filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}

li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];

// This is when you want to find words that contain the search string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
li[i].style.display = "";
} else {
li[i].style.display = "none";
} 

// This is when you want to find words that start the search string
/*if (a.innerHTML.toUpperCase().startsWith(filter)) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}*/
}
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：