Question

一直在寻找我的问题的答案，但找不到任何特别的东西，所以会问这里。我遇到的问题是当我清除输入字段时，我在屏幕上显示的所有列表项都不可见，因为它们被设置为显示：none，直到那里＆＃39 ; s在搜索字段中输入的字母。这是我的JS代码，它将提供一个故障链接，以便您可以根据需要查看项目。我是javascript的新手，所以如果它是一个愚蠢的问题，请不要对我严厉：D提前谢谢！

   //Get the input element
let filterInput = document.getElementById("searchInput");

//Add event listener
filterInput.addEventListener("keyup", filterNames);

function filterNames(){
    //Get the value of the input
    let filterValue = document.getElementById("searchInput").value.toUpperCase();

    //Get the names unordered list
    let ul = document.getElementById("names");

    //Get the list items
    let li = ul.querySelectorAll("li.collection-item");
    let h = ul.querySelectorAll("li.collection-header");

    //Loop trough the collection
    for(let i=0; i < li.length; i++){
        let a = li[i].getElementsByTagName("a")[0];
        //If matched
        if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1 && a.innerHTML.toUpperCase().indexOf(filterValue) === 0){
            li[i].style.display = "block";
        } else{
            li[i].style.display = "";
        }
    }
    for(let i = 0; i < h.length; i++){  
        let title = h[i].getElementsByTagName("h3")[0];
        if(title.innerHTML.toUpperCase().indexOf(filterValue[0]) > -1){
            h[i].style.display = "block";
        } else {
            h[i].style.display = "";
        }
    };
}

这是一个指向故障项目的链接：https://glitch.com/edit/#!/quirky-girdle?path=index.html:10:0

Answer 1

尝试添加let has_input = filterValue.length > 0;，然后将每个if(...)更改为if (has_input && ...)。

还可以使用style.display = "none";隐藏项目。

Answer 2

也许是因为设置无显示，你不写

.style.display = "";

但是

.style.display = "none";

在清除输入上隐藏列表项

2 个答案: