这是我在其他地方找到的一篇文章不错，希望对各位有帮助

Question

我正在尝试创建一个即时搜索框。当用户开始在搜索框中输入内容时，它会触发一个JavaScript事件来隐藏博客文章（#home），而将显示搜索结果（下面不包括脚本的这一部分）。但是，用户清除搜索框后，由于display的#home仍设置为none，他们只能看到空白页。

如何使JavaScript检测到用户清除了#search-input处的输入并再次使#home显示true？

document.getElementById('search-input').oninput = function() {
document.getElementById('home').style.display = 'none';
};
最佳答案

您可以通过input事件侦听器执行此操作。要隐藏#home元素，请添加条件以检查输入是否具有值。如果没有，则将其隐藏。要将其恢复原状，您需要做相反的事情，但前提是#home被隐藏：

const searchInput = document.getElementById('search-input');
const home = document.getElementById('home');

searchInput.addEventListener('input', function() {
if (!this.value) {
home.style.display = 'none';
} else if (this.value && home.style.display === 'none') {
home.style.display = 'block';
}
});

<input type="text" id="search-input" />

Sample Content