Select2不显示Ajax响应,tmdb数据

时间:2020-06-16 07:18:02

标签: jquery ajax jquery-select2 themoviedb-api

在将其标记为重复项之前,请仔细阅读。.

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

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

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

M2

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

使用Easy autocomplete,我能够复制相同的功能

<html>
<head>
<title>Movie Search</title>
<!-- CSS file -->
<link rel="stylesheet" href="EasyAutocomplete/easy-autocomplete.min.css">

<!-- Additional CSS Themes file - not required-->
<link rel="stylesheet" href="EasyAutocomplete/easy-autocomplete.themes.min.css">

</head>
<body>
<input id="provider-remote" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- JS file -->
<script src="EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>

<script>

var options = {
    url: function(phrase) {
        if (phrase !== "") {
            return "http://api.themoviedb.org/3/search/movie?api_key=fe4d662718177607da792694a52e7911&query=" + phrase + "&format=json";
        } else {
            return "http://api.themoviedb.org/3/search/movie?api_key=fe4d662718177607da792694a52e7911&query=";
        }
    },

    getValue: "original_title",

    ajaxSettings: {
        dataType: "jsonp"
    },

    listLocation: "results",

    requestDelay: 300,
};

$("#provider-remote").easyAutocomplete(options);
</script>
</body>

</html>