使下拉菜单仅在调用函数时可见

Question

I am trying make the drop-down visible only when something is entered in the search bar.Otherwise it stays collapsed. Following is my code

 function mysearchFunction() { var input, upperCase, ul, li, x, i, ax; input = document.getElementById("mysearchInput"); upperCase = input.value.toUpperCase(); ul = document.getElementById("myList"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { x = li[i].getElementsByTagName("a")[0]; if (x.innerHTML.toUpperCase().indexOf(upperCase) === 0) { li[i].style.visibility = "visible"; li[i].style.display = "block"; } else { li[i].style.display = "none"; } } } 

 #myList li a { border: 1px solid #ddd; margin-top: -2px; background-color: #f6f6f6; padding: 10px; text-decoration: none; font-size: 16px; color: black; display: block; visibility: collapse; } 

 <input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search.."> <ul id="myList"> <li><a href="#">America</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Asia</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Australia</a></li> </ul> 

In the JS, I am trying to make only content that needs to be displayed as visible. Kindly guide me where I am going wrong. No content is currently being displayed. It is staying collapsed.

Answer 1

Just updated the css selector: #myList li , you were hiding all the links.

 function mysearchFunction() { var input, upperCase, ul, li, x, i, ax; input = document.getElementById("mysearchInput"); upperCase = input.value.toUpperCase(); //console.log(upperCase); ul = document.getElementById("myList"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { x = li[i].getElementsByTagName("a")[0]; if (x.innerHTML.toUpperCase().indexOf(upperCase) == 0 && upperCase !== '') { li[i].style.visibility = "visible"; li[i].style.display = "block"; } else { li[i].style.display = "none"; } } } 

 #myList li { border: 1px solid #ddd; margin-top: -2px; background-color: #f6f6f6; padding: 10px; text-decoration: none; font-size: 16px; color: black; display: block; visibility: collapse; } 

 <input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search.."> <ul id="myList"> <li><a href="#">America</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Asia</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Australia</a></li> </ul>