Select2 load data with Ajax from file

ajax, jquery, jquery-select2

Solution

Simple Example

It would be useful to know the format of the object you're getting back from `listofvalues.php`, but let's just assume, for the sake of simplicity it looks like this:

[ {"id": 1, "text": "option1"},
  {"id": 2, "text": "option2"},
  {"id": 3, "text": "option3"} ]

This is the easiest format to use, as by default, `select2` can handle objects with property names `id` and `text` and render them into a dropdown list. So your `select2` initialisation might look like this:

$('#select2div').select2({
    ajax: {
        dataType: "json",
        url: "listofvalues.php",
        results: function (data) {
            return {results: data};
        }
    }
});

Slightly Trickier Example

Now let's assume the data from `listofvalues.php` doesn't follow the convenient naming conventions:

[ {"id": 1, "firstName": "John", "lastName": "Lennon"},
  {"id": 2, "firstName": "Paul", "lastName": "McCartney"},
  {"id": 3, "firstName": "George", "lastName": "Harrison"},
  {"id": 4, "firstName": "Ringo", "lastName": "Starr"} ]

We'll have to set up a function to handle the output:

function formatValues(data) {
    return data.firstName + ' ' + data.lastName;
}

And our `select2` initialisation:

$('#select2div').select2({
    ajax: {
        dataType: "json",
        url: "listofvalues.php",
        results: function (data) {
            return {results: data};
        }
    },
    formatResult: formatValues
});

Let me know how you get on.

Problem

I have a script called `listofValues.php`, which queries a database and returns JSON format values. What I need is to pass these values to the `select2` `data` member. I need it to load once. I don't need to pass values from `select2` input (term) to my `listofValues.php` as described in this example ``` $('#select2div').select2({ //data:[], ajax: { dataType: "json", url: "listofvalues.php", success: function (data) { } } ``` Can you help me with this?

Original source