javascript - 当输入为空时更改 的样式

Question

我正在用 html 为我的网站创建一个搜索字段，但我不明白如何使用 javascript 将 display 更改为 none。

function search() {
    var input            =               document.getElementById("myInput");
    var filter           =               input.value.toUpperCase();
    var ul               =               document.getElementById("myUL");
    var li               =               ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {

        var a             =            li[i].getElementsByTagName("a")[0];
        var txtValue      =            a.textContent || a.innerText;

        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } 

        else {
            li[i].style.display = "none";
        }
    }
}

<div class="search">
    <input type="text" id="myInput" onkeyup="search()" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
        <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

        <li class="search_li"><a class="search_link" href="#">Billy</a></li>
        <li class="search_li"><a class="search_link" href="#">Bob</a></li>

        <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
        <li class="search_li"><a class="search_link" href="#">Christina</a></li>
        <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
    </ul>
</div>

Answer 1

这里有一个解决方案:注意 && filter 以确保输入有一个值并调用页面上的函数准备先隐藏它 ;)

function search() {
    var input            =               document.getElementById("myInput");
    var filter           =               input.value.toUpperCase();
    var ul               =               document.getElementById("myUL");
    var li               =               ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {

        var a             =            li[i].getElementsByTagName("a")[0];
        var txtValue      =            a.textContent || a.innerText;

        if (txtValue.toUpperCase().indexOf(filter) > -1 && filter) {
            li[i].style.display = "block";
        } 

        else {
            li[i].style.display = "none";
        }
    }
}
search()

<div class="search">
    <input type="text" id="myInput" onkeyup="search()" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
        <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

        <li class="search_li"><a class="search_link" href="#">Billy</a></li>
        <li class="search_li"><a class="search_link" href="#">Bob</a></li>

        <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
        <li class="search_li"><a class="search_link" href="#">Christina</a></li>
        <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
    </ul>
</div>