js 用filter过滤列表 监听input的值变化显示过滤列表 否则默认显示所有列表

好的，这是一个比较常见的前端开发问题。首先，你需要定义一个包含所有列表项的数组。然后，你需要为输入框添加一个事件监听器，以便在输入内容发生变化时更新过滤列表。下面是一个示例代码：

<input type="text" id="filter-input" placeholder="输入过滤条件">
<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

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 = '';
  filteredList.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);
});

在这个示例中，我们先定义了一个包含所有列表项的数组 `list`，然后获取到输入框和列表容器的 DOM 元素。接着，我们为输入框添加了一个 input 事件监听器，在监听器内使用 `filter()` 方法过滤出符合条件的列表项，并重新渲染列表容器。最后，我们在页面加载完成时初始化列表容器，显示所有列表项。

希望这个示例能够帮助你解决问题。