如何使用JSON通过Ajax请求使用Select2?

我的Select2 3.4.5不适用于JSON数据。

这是我在HTML上的input框:

<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /> 

…和我的JavaScript

 $(".itemSearch").select2({ placeholder: "Search for an Item", minimumInputLength: 2, ajax: { url: "/api/productSearch", dataType: 'json', quietMillis: 100, data: function (term, page) { return { option: term }; }, results: function (data, page) { var more = (page * 10) < data.total; return { results: data.itemName, more: more }; } }, formatResult: function (data, term) { return data; }, formatSelection: function (data) { return data; }, dropdownCssClass: "bigdrop", escapeMarkup: function (m) { return m; } }); 

我用Laravel 4制作了一个API,当我在我的文本框中input任何内容时它会返回一个值。

如果我在文本框中input“test”,结果如下:

 [{"itemName":"Test item no. 1","id":5}, {"itemName":"Test item no. 2","id":6}, {"itemName":"Test item no. 3","id":7}, {"itemName":"Test item no. 4","id":8}, {"itemName":"Test item no. 5","id":9}, {"itemName":"Test item no. 6","id":10}, {"itemName":"Test item no. 7","id":11}] 

我无法将结果添加到我的Select2下拉菜单中。 我认为formatSelectionformatResult是造成这个问题,因为我不知道应该放置什么参数。 我不知道在哪里得到像容器,对象和查询这些参数和它应该返回的值,或者是我的JSON响应是错误的?

在这里你有一个例子

 $("#profiles-thread").select2({ minimumInputLength: 2, tags: [], ajax: { url: URL, dataType: 'json', type: "GET", quietMillis: 50, data: function (term) { return { term: term }; }, results: function (data) { return { results: $.map(data, function (item) { return { text: item.completeName, slug: item.slug, id: item.id } }) }; } } }); 

这很容易

对于select2 v4.0.0略有不同

 $(".itemSearch").select2({ tags: true, multiple: true, tokenSeparators: [',', ' '], minimumInputLength: 2, minimumResultsForSearch: 10, ajax: { url: URL, dataType: "json", type: "GET", data: function (params) { var queryParameters = { term: params.term } return queryParameters; }, processResults: function (data) { return { results: $.map(data, function (item) { return { text: item.tag_value, id: item.tag_id } }) }; } } }); 

在版本4.0.2稍微不同只是在processResultsresult

  processResults: function (data) { return { results: $.map(data.items, function (item) { return { text: item.tag_value, id: item.tag_id } }) }; } 

您必须在result添加data.itemsitems是Json名称:

 { "items": [ {"id": 1,"name": "Tetris","full_name": "s9xie/hed"}, {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"} ] } 

问题可能是由不正确的映射引起的。 你确定你有“数据”的结果吗? 在我的示例中,后端代码返回“items”键下的结果,因此映射应如下所示:

 results: $.map(data.items, function (item) { .... } 

并不是:

  results: $.map(data, function (item) { .... } 

这是我如何解决我的问题,我正在获取数据variables中的数据,并通过使用上述解决scheme我得到错误could not load results 。 我不得不在processResults中分析结果。

 searchBar.select2({ ajax: { url: "/search/live/results/", dataType: 'json', headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, delay: 250, type: 'GET', data: function (params) { return { q: params.term, // search term }; }, processResults: function (data) { var arr = [] $.each(data, function (index, value) { arr.push({ id: index, text: value }) }) return { results: arr }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1 });