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: Hangs waiting for results

score 11 · Accepted Answer · answered Jun 27 '13 at 07:32

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

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

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

edited May 23 '17 at 10:32

Community

1
1

answered Jun 16 '13 at 20:07

Muthu Ganapathy Nathan

3,199
16
47
77

1

This is no simple Ajax call though, it's a plugin. Or do you know how exactly the `data` and `results` callbacks work? – Felix Kling Jun 16 '13 at 20:09
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." -- http://ivaynberg.github.io/select2/ – blaze Jun 16 '13 at 20:20
@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?? – Muthu Ganapathy Nathan Jun 16 '13 at 20:22

Select2: Results not showing using AJAX

2 Answers2