Select2: Results not showing using AJAX

Question

I am having trouble getting the results to show up in the Select2 using AJAX. Here is my code:

$(document).ready(function() {
    $("#producto").select2({
        placeholder: 'Select a product',
        formatResult: productFormatResult,
        formatSelection: productFormatSelection,
        dropdownClass: 'bigdrop',
        escapeMarkup: function(m) { return m; },
        minimumInputLength:3,
        ajax: {
            url: 'http://foo.foo/listar.json',
            dataType: 'jsonp',
            data: function(term, page) {
                return {
                    q: term
                };  
            },  
            results: function(data, page) {
                return {results:data};
            }   
        }   
    });


function productFormatResult(product) {
    var html = "<table class='product-resultado'><tr>";
    if(product.img != undefined) {
        html += "<td class='product-image'><img src='"+product.img+"'/></td>";
    }
    html += "<td class='product-info'>";
    html += product.text + "<br />";
    html += product.precio_costo + " CRC <br />";
    html += "Existencias: " + product.existencias;
    html += "</td></tr></table>";
    return html;
}

function productFormatSelection(product) {
    return product.text;
}

Using the Javascript Console, I see the request returns the expected JSON:

[

{ "text":"Foo Product", "img":"#", "precio_costo": 45, "existencias":0, "id":2 }

]

I believe the results: function(data, page) { ... } is not being called, since I put an alert there and nothing happened.

It just hangs there waiting for results:

Hangbird

Answer 1

I guess you're returning json instead of jsonp,

so try changing the line dataType: 'jsonp' to dataType: 'json', or even removing the whole line.

I've experienced the same before. json result is screened out by this criteria, even if the expected JSON is actually returned, very possibly because json and jsonp are seen as two different formats

PS: This is more like a comment, but since i can't comment on your question, please bear with me

Peluso

Answer 2

I think you cannot return a value form ajax call., since the ajax call is asynchronous. Rather handle the results there itself. or use callback functions as given in the link below.

see jQuery: Return data after ajax call success

Aminopyrine

This is no simple Ajax call though, it's a plugin. Or do you know how exactly the data and results callbacks work? – Dusen

Yes, from the docs it says "This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses." -- ivaynberg.github.io/select2 – Hangbird

@Felix Kling ya I know how callbacks works, like passing a function pointer , so that the function will be called by the pointer. Also, I know ajax call is asynchronous and it cant return a value. And I thought the OP is lagging there since ajax concept is same everywhere., hence gave a suggestion. So, in answer I put 'I think'. To admit - I dont know the exact scenario where he is working in. Am I wrong anywhere in answer?? – Aminopyrine