如何实现点击搜索框后才显示搜索列表（JavaScript）

我来帮你搞定这个小问题～你当前的代码里有个变量赋值的错误，导致点击搜索栏时没法正常显示列表，咱们一步步来调整：

问题根源 #

你这行代码：

var too = document.getElementById("myUL").style.display = "none";

实际上是把字符串 "none" 赋值给了变量 too，而不是把UL元素对象保存下来。所以在textFunc()里调用too.style.display的时候，会因为too是字符串而非DOM元素而报错。

修正后的完整代码 #

HTML

<!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="showList()" 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>

CSS

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

JavaScript

// 保存UL元素的引用，方便后续使用
const phonebookList = document.getElementById("myUL");
// 页面加载后隐藏列表
phonebookList.style.display = "none";

function myFunction() {
  const input = document.getElementById("myInput");
  const filter = input.value.toUpperCase();
  const liItems = phonebookList.getElementsByTagName("li");

  for (let i = 0; i < liItems.length; i++) {
    const link = liItems[i].getElementsByTagName("a")[0];
    if (link.innerHTML.toUpperCase().indexOf(filter) > -1) {
      liItems[i].style.display = "";
    } else {
      liItems[i].style.display = "none";
    }
  }
}

// 点击搜索栏时显示列表
function showList() {
  phonebookList.style.display = "block";
}

// 额外优化：点击页面其他区域时隐藏列表
document.addEventListener('click', function(e) {
  const input = document.getElementById("myInput");
  if (!input.contains(e.target) && !phonebookList.contains(e.target)) {
    phonebookList.style.display = "none";
  }
});

修改说明 #

1. 先把UL元素的引用保存到变量phonebookList里，后续操作都直接用这个变量，避免重复获取DOM元素
2. 修正了showList()函数（原textFunc），直接操作保存好的UL元素来显示列表
3. 新增了点击页面其他区域隐藏列表的功能，提升用户体验——用户点击搜索栏外的地方，列表会自动收起

内容的提问来源于stack exchange，提问作者user9706950