网站搜索功能故障：新查询时无法清除旧搜索结果求助

数据老陈

2026-8-6

解决搜索结果不清空的问题

你的问题核心是清空旧结果的时机不对——你需要在发起API请求之前就执行清空操作，而不是等到请求返回后再处理。如果把清空逻辑放在then回调里，一旦请求失败，旧结果就会保留下来。

修改步骤：

提前获取结果容器的DOM引用，避免重复查询DOM浪费性能
在每次触发搜索时，先清空容器再发起请求
补充必要的输入验证和错误处理

修改后的完整代码示例：

// 获取DOM元素
const searchBtn = document.getElementById('search');
const input = document.getElementById('TVShowName');
const resultContainer = document.querySelector('.TVShowInfo');

// 绑定搜索点击事件
searchBtn.addEventListener('click', () => {
  const TVShow = input.value.trim();
  if (!TVShow) return; // 空输入不发起无效请求

  // 关键：发起请求前先清空旧结果
  resultContainer.innerHTML = '';

  fetch(`https://api.tvmaze.com/search/shows?q=${TVShow}`)
    .then((response) => response.json())
    .then((data) => {
      for (const value of data) {
        resultContainer.insertAdjacentHTML('beforeend',
          `<div class="TVShow"> <!-- 注意：不要用重复ID，改成class -->
             <center>
               <h1>${value.show.name}</h1>
             </center>
           </div>`);
      }
    })
    .catch(err => {
      console.error('请求出错:', err);
      resultContainer.innerHTML = '<p>搜索失败，请稍后重试</p>';
    });
});