Question posted in
You can find the official documentation here.

Select2 Not Displaying Ajax Response, tmdb data – Jquery ajax

Before you mark this as a duplicate, please read carefully..

I am using select2 to select remote data via ajax.

I am able to console.log and see the returned data, but the response is not displayed using on the select2 options.

I am searching movie titles from the “themoviedb” api to display them on the select field as autocomplete suggestions.
Any help would be appreciated 

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using Easy autocomplete, I was able to replicate the same functionality

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


  2. 0

    I have tried your code, the problem lies in the way that you are mapping the data.The response is sent in results key where you are accessing the item key. Changing the $.map(data.items) to $.map(data.results) would do the trick

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search