Select2 load data with Ajax from file

Question

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?

Figureground

Answer 1

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.

Gorgon

Sad times :( Which part, the first example, or the second? Knock up a JSFiddle and I'll take a look :D – Gorgon

I figured out. The json requires quotes around the keys: [ {"id": "1", "text": "option1"},{"id": "2", "text": "option2"},{"id": "3", "text": "option3"} ] Hope this helps. Maybe that's why your answer didn't get picked as the right answer. – Quinte

Good catch. The JSON wasn't really part of my answer, I just took a guess at what the OP's PHP was delivering. I'll update, since having correctly-formed JSON will improve the example :) Who knows why the OP never got back to me – Gorgon

@simon How is the value specified? – Vinosity

@chris Sorry, which value do you mean? – Gorgon

@simon nevermind, realized "id" attribute is the value, thought that it had to be an int value or something. I was talking about the actual value of the selected input. what gets submitted to the form, that is. – Vinosity