原生js实现搜索功能
时间: 2023-09-01 13:10:47 浏览: 66
好的,以下是一个简单的原生JS实现搜索功能的示例:
HTML代码:
```html
<input type="text" id="searchInput" placeholder="Search...">
<ul id="list">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Dragonfruit</li>
<li>Elderberry</li>
<li>Fig</li>
</ul>
```
JS代码:
```javascript
const searchInput = document.getElementById('searchInput');
const list = document.getElementById('list');
const items = list.getElementsByTagName('li');
searchInput.addEventListener('keyup', function() {
const searchValue = this.value.toLowerCase();
for(let i = 0; i < items.length; i++) {
const item = items[i];
const text = item.textContent.toLowerCase();
if(text.indexOf(searchValue) === -1) {
item.style.display = 'none';
} else {
item.style.display = 'block';
}
}
});
```
这段代码实现了一个简单的搜索功能,当用户在输入框中输入内容时,JS会遍历所有列表项,将不符合搜索条件的隐藏起来。其中,`keyup`事件监听用户在输入框中输入内容,`toLowerCase()`将输入内容和列表项的文本都转为小写,`indexOf()`方法判断是否包含搜索内容,`style.display`属性用于控制显示或隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)