Running this code
<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("The search field is empty!");
return false;
}
else if (xpe.length<3) {
alert("Minimum of 3 characters required for search");
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 content that hides when the search button is clicked for future usage.
<div>
</body>
</html>
Expected Output:
When the search button is clicked and a matching search input is found in the list, the list should be displayed. If there are no matches in the list, a div containing "No results found!" should be displayed. When the user searches for a suitable keyword that matches the list, the div should hide and only show the search results.
I have tried using display: none; in CSS and block in JS. Unfortunately, it did not work as expected. I was thinking about using toggle, but I am a beginner in JS. How can I fix this issue? Any help with solutions would be greatly appreciated.