title: Select2 custom data return from API
body: <p>I am working with select2 to display the data return from the API. However, the data didn't manage to load out.Am I doing something wrong? Any ideas how to fix this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select class="js-example-basic-single form-control select2 select2-hidden-accessible" id="user" name="user_id" autocomplete="off" required="required"&gt;
  &lt;option value=""&gt;Please select&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>var url = "{{env('API_URL')}}";    
  var username = null;
          $(".select2").select2({
              placeholder: "Please select",
              width: null,
              ajax: {
                  dataType: "jsonp",
                  method: "GET",
                  data: function (term) {
                      username = term.term;
                      return {"username": username};
                  },                
                  url: url+"user/search/username?",
                  results: function (data) {
                      return {
                          results: data.result.users
                      };
                  },
              },
              formatResult: function (option) {
                  return "&lt;option value='" + option.id + "'&gt;" + option.username + "&lt;/option&gt;";
              },
              formatSelection: function (option) {
                  return option.id;
              }
          }); 
  </code></pre>
  
  <p>result return from API:</p>
  
  <pre><code>result : [{"users":["[object] (App\\User: {\"username\":\"Kaki\",\"id\":123456})","[object] (App\\User: {\"username\":\"(Alan)\",\"id\":123457})","[object] (App\\User: {\"username\":\"Alex\",\"id\":123458})","[object] (App\\User: {\"username\":\"Sky\",\"id\":1234569})","[object] (App\\User: {\"username\":\"Kvin\",\"id\":123460})"]}] []
  </code></pre>