Я использую этот код,
<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 и показывать только результаты поиска.
Я пытался сделать display: none; в css и block в js. Но, к сожалению, это не работает. Я думал о чем-то вроде переключателя, но не знаю, как сделать это как новичок в js. Как это исправить? Пожалуйста, помогите мне с исправлениями.