带有ajax的jquery-select2 multi的JSON格式 [英] JSON format for jquery-select2 multi with ajax

问题描述

我正在考虑从Chosen转到Select2，因为Select2具有ajax的本机方法。 Ajax很关键，因为通常你必须加载大量数据。

I'm thinking in moving from Chosen to Select2 because Select2 has native methods for ajax. Ajax is critical because usualy you have to load a lot of data.

我用api.rottentomatoes.com/api /

I executed sucessfully the example with the JSON of api.rottentomatoes.com/api/

我做了一个用于测试ajax的JSON文件，但它不起作用。

I did a JSON file to test the ajax, but it didn't works.

我不知道JSON应该如何。似乎没有详细的文档：

I don't know how the JSON should be. It seems that there is no detailed documentation:

https：// github.com/ivaynberg/select2/issues/920

我尝试了几种JSON格式，所以我尝试复制类似于api.rottentomatoes的JSON格式但它不起作用。

I tried unsucessfully several JSON formats, so I tried to copy a JSON format similar to api.rottentomatoes but it doesn't works.

我可能会遗漏一些愚蠢的东西。

I may be missing something stupid.

function MultiAjaxAutoComplete(element, url) {
    $(element).select2({
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        multiple: true,
        ajax: {
            url: url,
            dataType: 'jsonp',
            data: function(term, page) {

                return {
                    q: term,
                    page_limit: 10,
                    apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey
                };
            },
            results: function(data, page) {
                return {
                    results: data.movies
                };
            }
        },
        formatResult: formatResult,
        formatSelection: formatSelection,
        /*initSelection: function(element, callback) {
            var data = [];
            $(element.val().split(",")).each(function(i) {
                var item = this.split(':');
                data.push({
                    id: item[0],
                    title: item[1]
                });
            });
            //$(element).val('');
            callback(data);
        }*/
    });
};

function formatResult(node) {
    return '<div>' + node.id + '</div>';
};

function formatSelection(node) {
    return node.id;
};


/*MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json');*/

MultiAjaxAutoComplete('#e6', 'https://raw.github.com/katio/Quick-i18n/master/test.json');

$('#save').click(function() {
    alert($('#e6').val());
});

我做了这个jsfiddle：

I did this jsfiddle:

< a href =http://jsfiddle.net/Katio/H9RZm/4/> http://jsfiddle.net/Katio/H9RZm/4/

推荐答案

如果切换到JSON，请确保从JSONP将dataType切换为JSON。

If you switched to JSON make sure you switch dataType to JSON from JSONP.

此处指定格式：< a href =http://ivaynberg.github.io/select2/#doc-query =noreferrer> http://ivaynberg.github.io/select2/#doc-query

JSON应如下所示：

The JSON should look like this:

{results: [choice1, choice2, ...], more: true/false }

基本上，选择中唯一需要的属性是 id 。如果该选项包含其他子选项（例如类似于optgroup的选项），那么这些选项在 children 属性中指定。

Basically the only required attribute in the choice is the id. if the option contains other child options (such as in case of optgroup-like choices) then those are specified inside the children attribute.

默认选择和选择渲染器在每个选项中都需要 text 属性 - 这就是用于渲染选择的内容。

The default choice and selection renderer expect a text attribute in every choice - that's what is used to render the choice.

所以使用默认渲染器的美国州的完整示例可能如下所示：

so a complete example of a US state using default renderer might look like this:

{
    "results": [
        {
            "id": "CA",
            "text": "California"
        },
        {
            "id": "CO",
            "text": "Colarado"
        }
    ],
    "more": false
}

希望这能让你开始。

这篇关于带有ajax的jquery-select2 multi的JSON格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！