点击javascript之前，不显示搜索栏

Question

I'm trying to create a search bar that searches a list. 我正在尝试创建一个搜索列表的搜索栏。 Right now the list is showing whenever I am trying to search. 现在，无论何时我尝试搜索，列表都会显示出来。 I want the list to appear when the search bar is pressed on. 我希望在按下搜索栏时显示该列表。 I tried to hide the list once the webpage is loaded then setting an onclick function onto the search bar to show the list. 网页加载后，我试图隐藏列表，然后在搜索栏上设置onclick函数以显示列表。 This is what I have so far. 到目前为止，这就是我所拥有的。

 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"; } } } var too = document.getElementById("myUL").style.display = "none"; function textFunc() { too.style.display = "inline"; }

 * { 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; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>My Phonebook</h2> <input type="text" id="myInput" onkeyup="myFunction()" onclick="textFunc()" 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> </body> </html>

The code I'm showing you is from W3 schools. 我向您显示的代码来自W3学校。

Answer 1

Change 更改

var too = document.getElementById("myUL").style.display = "none";
function textFunc() {
  too.style.display = "inline";
}

To 至

document.getElementById("myUL").style.display = "none";
function textFunc() {
  var too = document.getElementById("myUL");
  too.style.display = "inline";
}

Working Code Example: 工作代码示例：

 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"; } } } document.getElementById("myUL").style.display = "none"; function textFunc() { var too = document.getElementById("myUL"); too.style.display = "inline"; }

 * { 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; }

 <h2>My Phonebook</h2> <input type="text" id="myInput" onkeyup="myFunction()" onclick="textFunc()" 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>

点击javascript之前，不显示搜索栏

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-05-27 04:25:34

点击javascript之前，不显示搜索栏

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-05-27 04:25:34

解决方案1
0 已采纳 2018-05-27 04:25:34