我的Select2 3.4.5不能使用JSON数据.
这是HTML上的输入框:
......和我的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,只要我在文本框中输入任何内容,它就会返回一个值.
如果我在文本框中输入"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响应是错误的?
这就是我解决问题的方式,正在获取数据变量中的数据,并且通过使用上述解决方案,我遇到了错误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 });
这里有一个例子
$("#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 } }) }; } } });
这很容易
在版本4.0.2中略有不同Just in processResults
和in result
:
processResults: function (data) { return { results: $.map(data.items, function (item) { return { text: item.tag_value, id: item.tag_id } }) }; }
您必须添加data.items
在result
.items
是Json的名字:
{ "items": [ {"id": 1,"name": "Tetris","full_name": "s9xie/hed"}, {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"} ] }
对于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 } }) }; } } });