带有ajax的jquery-select2 multi的JSON格式

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

我用api.rottentomatoes.com/api/的JSON成功执行了这个例子

我做了一个JSON文件来测试ajax，但它没有用。

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

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

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

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

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 '
' + node.id + '
'; }; 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：

http://jsfiddle.net/Katio/H9RZm/4/

Answer 1

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

格式在此处指定： http ： //ivaynberg.github.io/select2/#doc-query

JSON应该如下所示：

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

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

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

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

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

希望这能让你开始。

Answer 2

所需JSON格式的官方文档：ref。 https://select2.org/data-sources/formats

 { "results": [ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2" } ], "pagination": { "more": true } }