嘗試過濾數組但未獲得所需的輸出

Question

我有一個filtertask輸入，因此，每當用戶鍵入內容時，它都應僅顯示與鍵入的任務匹配的任務

篩選工作正常，但是在刪除鍵入的文本之后，任務列表不再出現

這里list-item是li元素的類

如果任務列表中有“ singh”和“ sharma”，而我鍵入“ m”進行過濾，則會顯示“ sharma”。 但是當我清除filtertask輸入時，僅顯示“ sharma”而不是“ singh”和“ sharma”

 filter.addEventListener('keyup', filTask); function filTask(e) { const text = e.target.value.toLowerCase(); if (text !== '') { document.querySelectorAll('.list-item').forEach(function(task) { const item = task.firstChild.textContent; if (item.toLowerCase().indexOf(text) != -1) { task.style.display = 'block'; } else { task.style.display = 'none'; } }); } } 

Answer 1

你只需要在這里else ，

if (text !== '') {
    document.querySelectorAll('.list-item').forEach(function(task) {
        const item = task.firstChild.textContent;
        if (item.toLowerCase().indexOf(text) != -1) {
            task.style.display = 'block';
        } else {
            task.style.display = 'none';
        }
    });
} else {
    document.querySelectorAll('.list-item').forEach(function(task) {
        task.style.display = 'block';
    });
}

Answer 2

您錯過了else條件。 當文本為空時，您需要將display:block設置為所有元素。

 var filter = document.getElementById('search'); filter.addEventListener('keyup', filTask); function filTask(e) { const text = e.target.value.toLowerCase(); if (text !== '') { document.querySelectorAll('.list-item').forEach(function(task) { const item = task.firstChild.textContent; if (item.toLowerCase().indexOf(text) != -1) { task.style.display = 'list-item'; } else { task.style.display = 'none'; } }); } else { document.querySelectorAll('.list-item').forEach(function(task) { task.style.display = 'list-item'; }); } } 

 <input type="text" id="search"/> <ul> <li class="list-item">sharma</li> <li class="list-item">singh</li> </ul>