时间戳

首页 > 解决方案 > Select2 不显示 Ajax 响应，tmdb 数据

jquery - Select2 不显示 Ajax 响应，tmdb 数据

问题描述

在将此标记为重复之前，请仔细阅读..

我正在使用 select2 通过 ajax 选择远程数据。

我能够 console.log 并查看返回的数据，但使用 select2 选项不显示响应。

我正在从“themoviedb”api 中搜索电影标题，以将它们作为自动完成建议显示在选择字段上。任何帮助，将不胜感激

<html>
<head>
<title>Movie</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

</head>
<body>

Search Movie Title: <select class="search-movie" style="width:300px;"></select>

<script>
  $(".search-movie").select2({
    minimumResultsForSearch: 10,
    ajax: {
    delay: 250,
    url: 'http://api.themoviedb.org/3/search/movie',
    dataType: 'json',
    contentType: "application/json",
    type: 'GET',
    data: function (params) {
    var query = {
      api_key : 'fe4d662718177607da792694a52e7911',
      query: params.term
    }
   return query;
  },
  processResults: function (data) {
      return {
          results: $.map(data.items, function (item) {
              return {
                  text: item.original_title,
                  id: item.id
              }
              console.log(results);
          })
      };
  }
},
});


</script>

</body>
</html>

标签： jqueryajaxjquery-select2themoviedb-api

解决方案

我已经尝试过您的代码，问题在于您映射数据的方式。响应是在您访问项目键的结果键中发送的。将 $.map(data.items) 更改为 $.map(data.results) 就可以了

推荐阅读