可以通过CSS中的display属性将元素隐藏起来,然后再通过JavaScript进行搜索。示例如下:
HTML代码:
- Element 1
- Element 3
CSS代码:
.search-container ul li {
display: block;
}
.search-container ul li.hidden {
display: none;
}
JavaScript代码:
var searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', function() {
var query = this.value.toLowerCase();
var elements = document.querySelectorAll('.search-container ul li');
elements.forEach(function(element) {
if (element.textContent.toLowerCase().indexOf(query) === -1) {
element.classList.add('hidden');
} else {
element.classList.remove('hidden');
}
});
});
这段代码通过监听搜索输入框的变化,在搜索期间遍历元素列表,检查每个元素是否包含搜索关键字,如果不包含则添加一个'hidden”类,该类将元素隐藏起来。
上一篇:包含一个字符串在一个单元格中