検索バーに文字が入力されるまでhtmlテーブルを非表示にするにはどうすればいいですか？

Question

だから私は、ユーザーが1つ以上の文字を入力に入力したときにだけ表示するhtmlテーブルをしたい。これまで私が試みたことは働いていません。ここでは、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

これを試してください。 の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>