関数が呼び出されたときにのみドロップダウンが表示されるようにする

Question

検索バーに何かが入力されたときにのみドロップダウンを表示させようとしています。 JSに私のコードです

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>

に続いて、私は目に見えるように表示する必要のあるコンテンツだけを作るしようとしています。私が間違っているところを親切に案内します。表示されているコンテンツはありません。それは崩壊したままです。

Answer 1

CSSセレクタ：#myList liを更新すると、すべてのリンクが非表示になっていました。

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>