列表搜索时输入框内容变化但列表没更新怎么办？

成娟提问于 2026-03-07 15:51:19 阅读 7

交互

我在做商品列表的搜索功能，输入关键词后列表应该实时过滤，但不管怎么输，页面上的列表都没反应。明明数据变了，是不是哪里没触发更新？

我用的是原生JS操作DOM，监听了input事件，也重新渲染了列表，但就是不生效。下面是我写的过滤和渲染逻辑：

const searchInput = document.getElementById('search');
const listContainer = document.getElementById('list');

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.toLowerCase();
  const filtered = products.filter(item =>
    item.name.toLowerCase().includes(keyword)
  );
  renderList(filtered);
});

function renderList(items) {
  listContainer.innerHTML = items.map(item => 
    <div>${item.name}</div>
  ).join('');
}

我来解答赞 3 收藏

反馈

1 条解答

开发者鑫鑫 Lv1

问题在于你的模板字符串没被解析成HTML。用createElement或者把字符串转义一下：

function renderList(items) {

  listContainer.innerHTML = items.map(item => 

    <div>${item.name}</div>

  ).join('');

}

或者更安全点直接用DOM操作：

function renderList(items) {

  listContainer.innerHTML = '';

  items.forEach(item => {

    const div = document.createElement('div');

    div.textContent = item.name;

    listContainer.appendChild(div);

  });

}

2026-03-07 16:25