kentor kentor - 6 months ago 62
Javascript Question

Ajax request Select2 - Resultlist always empty

I tried using the Select 2 plugin with ajax as data source, but I always receive "No results found" in the result list, after typing some letters. I expected that it would list all found items (Field: LastName) from my Ajax response in my search results. I attached the ajax response at the end of this post.

My HTML select element:

<select class="player-select form-control">
</select>


My Select2 JS:

jQuery(document).ready(function() {
$(".player-select").select2({
ajax: {
url: "/database/players.php",
dataType: "json",
delay: 250,
processResults: function (data) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.LastName
};
}
},
minimumInputLength: 1,
})
});


My AJAX Response:

[
{
"Id":"27",
"FirstName":"Joe",
"LastName":"Cole",
"CommonName":null,
"Rating":"72",
"Position":"14",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"34079",
"FirstName":"Ashley",
"LastName":"Cole",
"CommonName":null,
"Rating":"77",
"Position":"14",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"146545",
"FirstName":"David",
"LastName":"C\u00f3rcoles Alcaraz",
"CommonName":"C\u00f3rcoles",
"Rating":"66",
"Position":"45",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"171565",
"FirstName":"Miguel",
"LastName":"Linares C\u00f3lera",
"CommonName":"Linares",
"Rating":"69",
"Position":"45",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"180216",
"FirstName":"S\u00e9amus",
"LastName":"Coleman",
"CommonName":null,
"Rating":"81",
"Position":"25",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"189884",
"FirstName":"Shannon",
"LastName":"Cole",
"CommonName":null,
"Rating":"63",
"Position":"195",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"198199",
"FirstName":"Pablo",
"LastName":"Alcolea Guerrero",
"CommonName":"Alcolea",
"Rating":"63",
"Position":"45",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"203268",
"FirstName":"Larnell",
"LastName":"Cole",
"CommonName":null,
"Rating":"63",
"Position":"14",
"LastPriceUpdate":"0000-00-00 00:00:00"
},
{
"Id":"219795",
"FirstName":"Joel",
"LastName":"Coleman",
"CommonName":null,
"Rating":"56",
"Position":"14",
"LastPriceUpdate":"0000-00-00 00:00:00"
}
]

Answer

Your processResults method would slightly vary, since you are trying to get a custom result matching LastName on each item. I've added comments so that you will know what has to be done.

processResults: function(data, params) {
  var resData = [];//just to store matching data
  //iterate through each data
  data.forEach(function(value) {
    //check if the LastName param contains the search param entered
    if (value.LastName.indexOf(params.term) != -1)
      resData.push(value)//push the item to resData array
  })
  return {
    results: $.map(resData, function(item) {
      //now while returning you need to map the array text and id property since you are
      //returning custom query
      return {
        text: item.LastName,
        id: item.Id
      }
    })
  };
},

A Full Demo Here