Select2 Not Displaying Ajax Ответ, данные tmdb - PullRequest
Новая
       36

Select2 Not Displaying Ajax Ответ, данные tmdb

0 голосов
/ 16 июня 2020

Прежде чем пометить это как дубликат, внимательно прочтите ..

Я использую select2 для выбора удаленных данных через ajax.

Я могу просмотреть console.log возвращенные данные, но ответ не отображается с использованием параметров select2.

Я ищу заголовки mov ie из api "themoviedb", чтобы отобразить их в поле выбора в качестве предложений автозаполнения. Любая помощь будет оценена 

<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>

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Я пробовал ваш код, проблема заключается в том, как вы сопоставляете данные. Ответ отправляется в ключе результатов, где вы получаете доступ к ключу элемента. Изменение $ .map (data.items) на $ .map (data.results) поможет

0 голосов
/ 16 июня 2020

Используя 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>
...