AJAX results issue - Data.Results is Undefined

Question

I am trying to setup Select2 to use Ajax and am rather stuck. I have debugged in IE and confirmed that my AJAX is returning results, so that doesn't appear to be the issue. The input box loads, but when I type "mi" in for "milk" it just says "searching..." and never finds anything!

Here is my Jquery:

        $(document).ready(function () {
            $('#e1').select2({
                placeholder: "Select an ingredient...",
                minimumInputLength: 2,
                ajax: {
                    url: "../api/IngredientChoices",
                    dataType: "jsonp",
                    quietMillis: 500,
                    data: function (term, page) {
                        return {
                            q: term,
                            page_limit: 10,
                            page: page

                        };
                    },
                    results: function (data, page) {
                        var more = (page * 10) < data.total;
                        return {
                            results: data.MainName, more:more
                        }

                    }
                }
            });
        });

JSON:

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

HTML:

<td><input type="hidden" id="e1" /></td>

If I change the dataType to be just json I get a different kind of error when I type "mi" into the box.

Here is the final code for the working version:

            $('#e1').select2({
                placeholder: "Select an ingredient...",
                minimumInputLength: 2,
                ajax: {
                    url: "../api/IngredientChoices",
                    dataType: "json",
                    quietMillis: 500,
                    data: function (term, page) {
                        return {
                            q: term,
                            page_limit: 10,
                            page: page

                        };
                    },
                    results: function (data, page) {
                        var more = (page * 10) < data.length;
                        console.log(more);
                        console.log(data);
                        return { results: data, more: more };

                    },
                    formatResult: function (post) {
                        markup = '<strong>' + post.text + '</strong>';
                    }
                }
            });

Answer 1

The error you are encountering appears to be because of the format of the results you are getting. Select2 is expected results to be a collection of objects with id: and text: attributes.

[{ id: 1, text: 'String' }, { id: 2, text: 'Other String.'}]