Question

I’ve been struggling lately with Jquery Select2 (Select2), trying to achieve ajax callbacks that get data from a ASP MVC ActionResult.

This is my HTML code:

<input type="hidden" id="e2" style="width: 500px;">

And this is the js code:

<script>
$(document).ready(function(){

    $("#e2").select2({
        minimumInputLength: 1,
        ajax:{
          url: "http://localhost:1800/Test/GetCountries",
            dataType:"jsonp",
            data: function(term, page){
                return {
                    query: term
                };
            },
            results: function(data){
                return {
                    results: data
                };
            }
        }
    });

});

GetCountries function is very straightforward, it just returns the countries that matches the term of search. This is a sample when searching for the term “united”:

[{"id":"AE","text":"United Arab Emirates"},{"id":"UK","text":"United Kingdom"},{"id":"US","text":"United States"}]

I have tried changing the format from application/json to text back and forth with no success. I think I am missing something on the json my function is returning, but after three hours I still have no clue what could be wrong here.

When I look into the Chrome debugger on the network tab, it seems to call the function and data is being sent. However when I type letters nothing displays, it just shows the “searching…” text forever.

If someone out there has been into the same situation, please share your thoughts. Thanks in advance.

Answer 1

It’s been a while since I asked for this one. I haven’t find the time to make the Select2 work, although a workaround on default Bootstrap’s Typeahead can do.

So, if someone comes around, don’t bother answering.