前端搜索功能实现代码
时间: 2023-08-23 17:06:51 浏览: 53
以下是一个简单的前端搜索功能的实现代码示例:
HTML 代码:
```html
<input type="text" id="searchInput" placeholder="输入关键词进行搜索">
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>西瓜</li>
<li>芒果</li>
<li>草莓</li>
</ul>
```
JavaScript 代码:
```javascript
const searchInput = document.getElementById('searchInput');
const list = document.getElementById('list');
const items = list.getElementsByTagName('li');
searchInput.addEventListener('input', function() {
const keyword = this.value.trim().toLowerCase();
for (let i = 0; i < items.length; i++) {
const item = items[i];
const text = item.textContent.trim().toLowerCase();
if (text.includes(keyword)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
});
```
这段代码实现了对一个简单的无序列表进行搜索的功能。当用户在搜索框中输入关键词时,JavaScript 代码会遍历列表中的每个数据项,并判断是否包含该关键词。如果包含,则显示该项;否则,隐藏该项。需要注意的是,这里的搜索是区分大小写的,如果需要实现不区分大小写的搜索,可以将所有的文本都转换为小写字母再进行比较。