从ul中搜索文本并实时显示结果可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<input type="text" id="searchInput" placeholder="搜索">
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
JavaScript:
const searchInput = document.getElementById('searchInput');
const list = document.getElementById('list').getElementsByTagName('li');
searchInput.addEventListener('input', search);
function search() {
const searchText = searchInput.value.toLowerCase();
for (let i = 0; i < list.length; i++) {
const itemText = list[i].textContent.toLowerCase();
if (itemText.indexOf(searchText) !== -1) {
list[i].style.display = 'block';
} else {
list[i].style.display = 'none';
}
}
}
这段代码会在输入框中输入文字时,实时搜索ul中的li元素,并显示匹配的结果。如果li元素的文本内容包含输入框的值,该li元素将显示出来,否则将隐藏。
对于这个问题,腾讯云没有特定的产品或链接可以提供。这是一个前端开发的功能,与云计算厂商无关。
领取专属 10元无门槛券
手把手带您无忧上云