【发布时间】：2020-04-12 17:08:47
【问题描述】：
我正在运行这段代码，
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Search Bar</title>
</head>
<body>
<style>
ul#wrapper {
padding: 10px;
list-style: none;
display: none;
}
#result {
display: none;
}
</style>
<script>
function searchFunction() {
var ape=document.getElementById("myinput");
var xpe = ape.value;
if (xpe.length<1) {
alert("Search field empty !");
return false;
}
else if (xpe.length<3) {
alert("Search required minimum 3 characters");
return false;
}
var input, filter, ul, li, a, i;
input = document.getElementById('myinput');
filter = input.value.toUpperCase();
ul = document.getElementById('wrapper');
fp = document.getElementById('fullpage');
result = document.getElementById('result')
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 = "";
ul.style.display = "block";
fp.style.display = "none";
result.style.display = "none";
}
else{
li[i].style.display = "none";
result.style.display ="block";
}
}
}
</script>
<input type="text" name="search" value="" autocomplete="off" id="myinput" placeholder="Search" />
<button onclick="searchFunction()"> search </button>
<br/><br/>
<div id="result"> No results found ! </div>
<ul id="wrapper">
<li>
<a href="#">Apple</a>
</li>
<li>
<a href="#">Ball</a>
</li>
<li>
<a href="#">Cat</a>
</li>
<li>
<a href="#">Dog</a>
</li>
<li>
<a href="#">Elephant</a>
</li>
<li>
<a href="#">Fish</a>
</li>
<li>
<a href="#">Grape</a>
</li>
<li>
<a href="#">Horse</a>
</li>
<li>
<a href="#">Ice-Cream</a>
</li>
<li>
<a href="#">Joker</a>
</li>
<li>
<a href="#">Kite</a>
</li>
<li>
<a href="#">Lion</a>
</li>
<li>
<a href="#">Mango</a>
</li>
<li>
<a href="#">Nest</a>
</li>
<li>
<a href="#">Orange</a>
</li>
<li>
<a href="#">Parrot</a>
</li>
<li>
<a href="#">Queen</a>
</li>
<li>
<a href="#">Rat</a>
</li>
<li>
<a href="#">Ship</a>
</li>
<li>
<a href="#">Table</a>
</li>
<li>
<a href="#">Umbrella</a>
</li>
<li>
<a href="#">Violet</a>
</li>
<li>
<a href="#">Watch</a>
</li>
<li>
<a href="#">X-max</a>
</li>
<li>
<a href="#">Yatch</a>
</li>
<li>
<a href="#">Zebra</a>
</li>
</ul>
<div id="fullpage">
This is a full page contents which hides when search button clicked. for future usage.
<div>
</body>
</html>
扩展输出，
当点击搜索并在列表中找到搜索输入时，它必须显示列表。 （这很好用）。同时，当没有搜索关键字与我们的列表匹配时，则必须显示一个包含“未找到结果！”的 div接下来，当用户搜索合适的关键字并匹配列表时，它必须隐藏该 div 并仅显示搜索结果。
我尝试在 css 中使用 display: none;，在 js 中使用 block。但是，不幸的是它不起作用。我在想类似切换的东西，但是不知道如何像 js 的初学者一样做到这一点。如何解决？请帮我解决问题。
【问题讨论】：
标签： javascript html css