在JavaScript中实现搜索功能,通常涉及到字符串的处理和数组的操作。以下是一个基础的搜索功能实现示例,以及相关的基础概念解释:
indexOf()
、includes()
、match()
等,可以用来检查一个字符串是否包含另一个字符串。find()
、filter()
等方法。假设我们有一个简单的HTML页面,其中包含一个输入框和一个按钮,用户可以在输入框中输入关键词,点击按钮后在页面上的列表中搜索匹配的项目。
HTML代码:
<input type="text" id="searchInput" placeholder="输入关键词">
<button onclick="search()">搜索</button>
<ul id="itemList">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<!-- 更多列表项 -->
</ul>
JavaScript代码:
function search() {
// 获取输入框的值
var keyword = document.getElementById('searchInput').value.toLowerCase();
// 获取列表项
var items = document.getElementById('itemList').getElementsByTagName('li');
// 遍历列表项,检查是否包含关键词
for (var i = 0; i < items.length; i++) {
var itemText = items[i].textContent.toLowerCase();
if (itemText.includes(keyword)) {
items[i].style.display = ''; // 显示匹配项
} else {
items[i].style.display = 'none'; // 隐藏不匹配项
}
}
}
领取专属 10元无门槛券
手把手带您无忧上云