用filter过滤列表 input的keyword值有相关值则显示过滤列表 当keyword为空默认显示所有列表
时间: 2024-02-17 14:00:10 浏览: 18
好的,那么我们可以在你提供的代码基础上进行修改,实现根据输入的关键词过滤列表。具体来说,我们需要在 `input` 事件监听器中判断输入框的值是否为空,如果不为空,则使用 `filter()` 方法过滤出符合条件的列表项,并重新渲染列表容器;如果为空,则显示所有列表项。下面是修改后的示例代码:
```html
<input type="text" id="filter-input" placeholder="输入过滤条件">
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
```
```javascript
const list = ['列表项1', '列表项2', '列表项3', '列表项4'];
const filterInput = document.getElementById('filter-input');
const listContainer = document.getElementById('list');
filterInput.addEventListener('input', () => {
const filterValue = filterInput.value.toLowerCase();
const filteredList = list.filter(item => item.toLowerCase().includes(filterValue));
listContainer.innerHTML = '';
if (filterValue) {
filteredList.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
listContainer.appendChild(li);
});
} else {
list.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
listContainer.appendChild(li);
});
}
});
// 初始化时显示所有列表项
list.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
listContainer.appendChild(li);
});
```
在这个示例中,我们在 `input` 事件监听器中新增了一个判断,如果输入框的值为空,则渲染所有列表项;否则,按照输入框的值过滤列表项,并渲染符合条件的列表项。同时,我们添加了一个 `toLowerCase()` 方法,用于将输入框的值转换为小写字母,以便进行大小写不敏感的匹配。
希望这个示例能够解决你的问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)