Select2 AJAX标签

Question

I have the following JSON, that is retrieved via /tags :

[
    {
        "id": "CSS",
        "text": "CSS"
    },
    {
        "id": "HTML",
        "text": "HTML"
    },
    {
        "id": "JavaScript",
        "text": "JavaScript"
    },
    {
        "id": "jQuery",
        "text": "jQuery"
    },
    {
        "id": "MySQL",
        "text": "MySQL"
    },
    {
        "id": "PHP",
        "text": "PHP"
    }
]

I have an <input /> that is made to accept tags by using Select2:

<input name="Tags" id="Tags" value="PHP,HTML,jQuery" />

And I have attached Select2 this way:

$("#Tags").select2({
    tags: true,
    tokenSeparators: [",", " "],
    createSearchChoice: function(term, data) {
        if ($(data).filter(function() {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id: term,
                text: term
            };
        }
    },
    multiple: true,
    ajax: {
        url: '/tags',
        dataType: "json",
        data: function(term, page) {
            return {
                q: term
            };
        },
        results: function(data, page) {
            return {
                results: data
            };
        }
    }
});

Problems

1. When I load the page, the default values go off.
2. The Select2 fires a request to /tags , but it doesn't load the tags.

There are no errors in the console too. I am using Select2 3.5.2 from CDN. Where am I going wrong?

Answer 1

Well, I used this. Looks like a hack or work-around.

$("#Tags").select2({
    tags: true,
    multiple: true
});
$.getJSON("/tags", function (data) {
    if (data.length > 0)
        $("#Tags").select2({
            tags: data,
            multiple: true
        });
});

Hope this helps for someone. I will keep this open till I get better suggestions.