在将其标记为重复之前，请仔细阅读。。
我正在使用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>使用轻松自动完成功能，我能够复制相同的功能
<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 {
//duckduckgo doesn't support empty strings
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>我已经尝试过您的代码，问题出在您映射数据的方式上。响应在结果键中发送，您可以在其中访问项目键。将$ .map（data.items）更改为$ .map（data.results）可以解决问题