使用OMDb API搭建电影搜索平台遇问题：搜索功能与数据显示异常

一、解决电影信息显示undefined的问题 #

你的代码里有两个核心错误导致字段显示undefined：

• OMDb API返回的电影字段是首字母大写的：标题是Title，年份是Year，你用了小写的title/year自然拿不到值。
• map函数的参数名和外层的movies数组重名，虽然语法合法，但容易混淆，建议改成movie。

修改后的渲染代码片段：

movieListEl.innerHTML = movies
  .map(
    (movie) => // 修正参数名避免混淆
      `<div class="movie__card">
        <div class="movie__card--container">
          <h3>${movie.Title}</h3> <!-- 改用首字母大写的Title -->
          <p><b>Year:</b>${movie.Year}</p> <!-- 改用首字母大写的Year -->
          <p><b>Rating:</b>xxxxx</p>
          <p><b>Runtime:</b>xxxxx</p>
          <p><b>Genre:</b>xxxxx</p>
        </div>
      </div>`
  )
  .join("");

二、实现搜索栏功能 #

给搜索组件添加事件监听，获取用户输入的关键词并重新请求API渲染结果：

完整修改后的JS代码 #

// 封装渲染电影列表的函数，方便重复调用
async function renderMovieList(keyword) {
  const movieListEl = document.querySelector(".movie__list");
  // 处理空关键词
  if (!keyword.trim()) {
    movieListEl.innerHTML = "<p>请输入搜索关键词</p>";
    return;
  }

  try {
    const response = await fetch(`https://www.omdbapi.com/?apikey=ba040381&s=${encodeURIComponent(keyword)}`);
    const movieData = await response.json();
    
    // 处理无搜索结果的情况
    if (!movieData.Search) {
      movieListEl.innerHTML = `<p>没有找到包含 "${keyword}" 的电影</p>`;
      return;
    }

    const movies = movieData.Search;
    // 渲染电影卡片
    movieListEl.innerHTML = movies
      .map(movie => `
        <div class="movie__card">
          <div class="movie__card--container">
            <h3>${movie.Title}</h3>
            <p><b>Year:</b>${movie.Year}</p>
            <p><b>Poster:</b><br><img src="${movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/150'}" alt="${movie.Title}" width="100"></p>
            <!-- 注意：OMDb的s接口只返回基础信息，Rating/Runtime/Genre需要调用带imdbID的详情接口获取 -->
          </div>
        </div>
      `).join("");
  } catch (err) {
    movieListEl.innerHTML = "<p>搜索失败，请稍后重试</p>";
    console.error(err);
  }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  // 初始化默认搜索
  renderMovieList('fast');

  // 获取搜索相关元素
  const searchInput = document.querySelector(".input__txt");
  const searchBtn = document.querySelector(".search__wrapper");

  // 搜索按钮点击事件
  searchBtn.addEventListener('click', () => {
    const keyword = searchInput.value;
    renderMovieList(keyword);
  });

  // 输入框回车事件
  searchInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const keyword = searchInput.value;
      renderMovieList(keyword);
    }
  });
});

补充说明 #

• 用encodeURIComponent()处理关键词，避免特殊字符导致请求错误。
• OMDb的s搜索接口只返回基础信息（Title/Year/Poster等），如果需要Rating/Runtime/Genre这些详情，需要再调用带i参数的详情接口（传入电影的imdbID）。
• 添加了错误处理和无结果提示，提升用户体验。

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