OMDB即时搜索栏开发问题：输入时无法实时展示搜索结果

你的代码核心问题是：API请求和结果渲染只在页面加载时执行了一次，input事件仅仅是更新了输入框的value属性，完全没有触发新的搜索逻辑，所以输入内容时自然不会显示新结果。

下面是修正后的代码，同时做了优化处理：

// 防抖函数，避免输入时频繁触发API请求
function debounce(func, delay = 300) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 封装搜索+渲染逻辑
async function searchMovies(query) {
  // 先清空旧的搜索结果
  const resultsContainer = document.getElementById('results-container');
  resultsContainer.innerHTML = '';

  // 空输入直接返回，不请求API
  if (!query.trim()) return;

  try {
    // 用encodeURIComponent处理关键词，避免特殊字符导致请求失败
    const response = await fetch(`http://www.omdbapi.com/?s=${encodeURIComponent(query)}&apikey=e4bbcb9c`);
    const data = await response.json();

    // 处理API返回无结果的情况
    if (data.Response === 'False') {
      const noResult = document.createElement('p');
      noResult.textContent = '没有找到相关影片';
      resultsContainer.appendChild(noResult);
      return;
    }

    // 渲染前3条结果（最多取搜索结果的前3个）
    for (let i = 0; i < Math.min(3, data.Search.length); i++) {
      const para = document.createElement('p');
      para.textContent = data.Search[i].Title;
      resultsContainer.appendChild(para);
    }
  } catch (error) {
    // 处理网络或API错误
    const errorMsg = document.createElement('p');
    errorMsg.textContent = '搜索出错，请稍后重试';
    resultsContainer.appendChild(errorMsg);
  }
}

// 初始化搜索栏事件
function initSearchBar() {
  const searchInput = document.getElementById('searchbar');
  // 给搜索函数加防抖，减少API请求次数
  const debouncedSearch = debounce(searchMovies);
  
  searchInput.addEventListener('input', (e) => {
    debouncedSearch(e.target.value);
  });
}

// 确保DOM加载完成后再初始化
document.addEventListener('DOMContentLoaded', initSearchBar);

关键修改说明： #

• 把搜索和渲染逻辑抽成独立函数searchMovies，每次输入时调用这个函数触发新搜索
• 加入防抖函数debounce，避免输入过程中每秒发送多次API请求，减轻服务器压力同时防止被限流
• 每次搜索前清空旧结果，避免结果重复堆积
• 用encodeURIComponent处理搜索关键词，解决特殊字符导致的请求错误
• 增加了异常处理，覆盖无结果、网络错误等场景
• 把初始化逻辑放到DOMContentLoaded事件中，确保输入框元素已加载完成

注意：需要在HTML中添加一个用于展示结果的容器，比如：

<input type="text" id="searchbar" placeholder="搜索影片">
<div id="results-container"></div>

内容的提问来源于stack exchange，提问作者Pang