问题
My Select2 3.4.5 is not working with JSON data.
Here is my input box on HTML:
<input class=\'form-control col-lg-5 itemSearch\' type=\'text\' placeholder=\'select item\' />
…and my 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;
}
});
I made an API with Laravel 4 which returns a value whenever I type anything on my text box.
Here\'s the result if I type \"test\" on my text box:
[{\"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}]
I can\'t add the result to my Select2 dropdown. I think formatSelection and formatResult are causing the problem because I don\'t know what parameter should be placed on it. I don\'t know where to get those parameters like container, object and query and the values it should be returning, or is my JSON response is wrong?
回答1:
Here you have an example
$("#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
}
})
};
}
}
});
It's quite easy
回答2:
for select2 v4.0.0 slightly different
$(".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
}
})
};
}
}
});
回答3:
In Version 4.0.2 slightly different Just in processResults and in result :
processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.tag_value,
id: item.tag_id
}
})
};
}
You must add data.items in result. items is Json name :
{
"items": [
{"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
{"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
]
}
回答4:
This is how I fixed my issue, I am getting data in data variable and by using above solutions I was getting error could not load results. I had to parse the results differently in 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
});
回答5:
Here I give you my example which contain --> Country flag, City, State, Country.
Here is my output.
Attach these two Cdn js or links.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
js script
//for apend flag of country.
function formatState (state) {
console.log(state);
if (!state.id) {
return state.text;
}
var baseUrl = "admin/images/flags";
var $state = $(
'<span><img src="'+baseUrl+ '/' + state.contryflage.toLowerCase() + '.png" class="img-flag" /> ' +state.text+ '</span>'
);
return $state;
};
$(function(){
$("#itemSearch").select2({
minimumInputLength: 2,
templateResult: formatState, //this is for append country flag.
ajax: {
url: URL,
dataType: 'json',
type: "POST",
data: function (term) {
return {
term: term
};
},
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name+', '+item.state.name+', '+item.state.coutry.name,
id: item.id,
contryflage:item.state.coutry.sortname
}
})
};
}
}
});
Expected JSON response.
[
{
"id":7570,
"name":"Brussels",
"state":{
"name":"Brabant",
"coutry":{
"sortname":"BE",
"name":"Belgium",
}
}
},
{
"id":7575,
"name":"Brussels",
"state":{
"name":"Brabant Wallon",
"coutry":{
"sortname":"BE",
"name":"Belgium",
}
}
},
{
"id":7578,
"name":"Brussel",
"state":{
"name":"Brussel",
"coutry":{
"sortname":"BE",
"name":"Belgium",
}
}
},
]
回答6:
Tthe problems may be caused by incorrect mapping. Are you sure you have your result set in "data"? In my example, the backend code returns results under "items" key, so the mapping should look like:
results: $.map(data.items, function (item) {
....
}
and not:
results: $.map(data, function (item) {
....
}
回答7:
My ajax never gets fired until I wrapped the whole thing in
setTimeout(function(){ .... }, 3000);
I was using it in mounted section of Vue. it needs more time.
回答8:
If ajax request is not fired, please check the select2 class in the select element. Removing the select2 class will fix that issue.
来源：https://stackoverflow.com/questions/20926707/how-to-use-select2-with-json-via-ajax-request