如何使用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下拉菜单中。 我认为formatSelection和formatResult是造成这个问题，因为我不知道应该放置什么参数。 我不知道在哪里得到像容器，对象和查询这些参数和它应该返回的值，或者是我的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稍微不同只是在processResults和result ：
processResults: function (data) { return { results: $.map(data.items, function (item) { return { text: item.tag_value, id: item.tag_id } }) }; }
您必须在result添加data.items 。 items是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 });
