내 Select2 3.4.5가 JSON 데이터로 작동하지 않습니다.
HTML의 입력 상자는 다음과 같습니다.
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
… 그리고 내 자바 스크립트
$(".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 응답이 잘못 되었습니까?
답변
여기에 예가 있습니다.
$("#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
}
})
};
}
}
});
아주 쉽습니다
답변
에 대한 선택 2의 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에서는 약간 다른 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. itemsJson 이름입니다.
{
"items": [
{"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
{"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
]
}
답변
여기에-> 국가 국기, 도시, 주, 국가 가 포함 된 예제를 제공합니다 .
다음은 내 결과입니다.
이 두 개의 Cdn j 또는 링크를 첨부하십시오.
<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 스크립트
//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
}
})
};
}
}
});
JSON 응답이 필요합니다.
[
{
"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",
}
}
},
]
답변
이것이 내 문제를 해결하는 방법이며 데이터 변수에 데이터를 가져오고 위의 솔루션을 사용하여 오류가 발생했습니다 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
});
답변
잘못된 매핑으로 인해 문제가 발생할 수 있습니다. “데이터”에 결과 세트가 있습니까? 내 예에서 백엔드 코드는 “items”키 아래에 결과를 반환하므로 매핑은 다음과 같아야합니다.
results: $.map(data.items, function (item) {
....
}
그리고 아닙니다 :
results: $.map(data, function (item) {
....
}
답변
내 ajax는 내가 모든 것을 포장 할 때까지 해고되지 않습니다.
setTimeout(function(){ .... }, 3000);
Vue의 마운트 섹션에서 사용했습니다. 시간이 더 필요합니다.
