javascript - 在搜索栏中输入字母之前如何隐藏 html 表格？

Question

所以我希望 html 表格仅在用户在输入中键入 1 个或多个字母时显示。到目前为止，我尝试过的方法没有奏效。这是 html(我没有包括我的完整表格):

        <input type="text" id="schoolName" onkeyup="search()" placeholder="Search for names..">
        <table class="table">
        <thead><tr>
        <th title="Field #1">Official Name</th>
        <th title="Field #2">Local Name</th>
        <th title="Field #3">Address 1</th>
        <th title="Field #4">Address 2</th>
        <th title="Field #5">Address 3</th>
        <th title="Field #6">Address 4</th>
        <th title="Field #7">County</th>
        </tr></thead>

这是js:

document.getElementById("search").addEventListener(search);
function search() {
if(document.getElementById("schoolName").value.length>1) {
    document.getElementById("table").style.visibility="visible";
 } else {
    document.getElementById("table").style.visibility="hidden";
 }
}

这是CSS:

.table{
visibility: hidden;
display: block;
height: 150px;
 overflow-y: scroll;
overflow-x: hidden; 
}

我不知道怎么做，谢谢你的帮助

Answer 1

试试这个。还将 getElementById 中的 id 更改为实际在您的代码中的一个，并为 table 提供一个 id。

document.getElementById("schoolName").addEventListener('change', function() {
  if (document.getElementById("schoolName").value.length > 1) {
    document.getElementById("table1").style.visibility = "visible";
  } else {
    document.getElementById("table1").style.visibility = "hidden";
  }
});

<input type="text" id="schoolName" placeholder="Search for names..">
<table id="table1" class="table">
  <thead>
    <tr>
      <th title="Field #1">Official Name</th>
      <th title="Field #2">Local Name</th>
      <th title="Field #3">Address 1</th>
      <th title="Field #4">Address 2</th>
      <th title="Field #5">Address 3</th>
      <th title="Field #6">Address 4</th>
      <th title="Field #7">County</th>
    </tr>
  </thead>