javascript - 如何根据API请求放置自动完成功能

我试图基于API“电影DB”（https://developers.themoviedb.org/3/search/search-movies）将自动填充功能添加到简单的表单输入（电影标题）中。

const findMovies = (wordToMatch) => {
        const url = `https://api.themoviedb.org/3/search/movie?api_key=263e31d1ad0c4defa8822787e614e716&language=en-US&query=${wordToMatch}&page=1&include_adult=false`
        const movies = [];
        fetch(url)
          .then(blob => blob.json())
          .then(data => data.results.forEach(result => movies.push(result.original_title)));
        return movies;
    }

    function displayMovies() {
      const moviesArray = findMovies(this.value);
      const html = moviesArray.map(movie => {
        return `
          <li>
            <span class="movie">${movieName}</span>
          </li>
        `;
      });
      suggestions.innerHTML = html;
    }

    const titleInput = document.querySelector("#memory_cultural_good_attributes_title");
    const suggestions = document.querySelector('.suggestions');

    if (titleInput) {
        titleInput.addEventListener("keyup", displayMovies);
    }

<%= movie_form.input :title %>
   <ul class="suggestions">
   </ul>

findMovies函数运行良好，并根据用户输入返回电影数组。
问题似乎是当我遍历displayMovies函数中的该数组（moviesArray）时，它没有给出预期的结果。

确实，当我在控制台中记录html的结果时，它为空。该地图似乎无法在MoviesArray上运行。我想知道是否MoviesArray不会是一个数组，但是如果我在这样的console.log（Array.isArray（moviesArray））这样的控制台中打印该数组，则会得到“ true”作为响应。

希望我的问题很清楚（这是我的第一个问题），不要犹豫，向我询问其他详细信息。

非常感谢 ！

最佳答案

您不能以这种方式返回影片，因为http调用是异步的，您必须等待结果并使用回调函数或使用promise来等待结果，然后才能填充影片。

当您编写.then并在其中做一些事情时，您已经做过。
因此，您可以使用fondMovies作为第一个调用的函数，而不是foreach，您可以调用displayMovies并在displaymovies函数中运行foreach。

像这样：

const findMovies = (wordToMatch) => {
    const url = `https://api.themoviedb.org/3/search/movie?api_key=263e31d1ad0c4defa8822787e614e716&language=en-US&query=${this.value}&page=1&include_adult=false`
    const movies = [];
    fetch(url)
      .then(blob => blob.json())
      .then(data => displayMovies(data));
}

function displayMovies(data) {
  const moviesArray = []
data.results.forEach(result => movies.push(result.original_title))
  const html = moviesArray.map(movie => {
    return `
      <li>
        <span class="movie">${movieName}</span>
      </li>
    `;
  });
  suggestions.innerHTML = html;
}

const titleInput = document.querySelector("#memory_cultural_good_attributes_title");
const suggestions = document.querySelector('.suggestions');

if (titleInput) {
    titleInput.addEventListener("keyup", findMovies);
}

关于javascript - 如何根据API请求放置自动完成功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57958733/