Select2 Ajax 메서드가 선택되지 않음
좋아, 여기 뭔가 간단한 문제가 있는 게 분명해. 하지만 난 100% 그게 아니야.
그래서 Select2 AJAX 메서드를 사용하여 사용자가 데이터베이스를 검색하고 결과를 선택하려고 합니다.콜 자체는 결과를 나타내지만, 리스트에서 답변을 선택할 수 없습니다.또, 호버나 위/아래 화살표에서는 「선택」할 수 없는 것 같습니다.자, 이제 제 코드는 이렇습니다.
index.displaces를 표시합니다.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
<script src="select2/select2.js"></script>
<script src="select.js"></script>
</head>
<body>
<input type="text" style="width: 500px" class="select2">
</body>
</html>
select.select.displaces
jQuery(function() {
var formatSelection = function(bond) {
console.log(bond)
return bond.name
}
var formatResult = function(bond) {
return '<div class="select2-user-result">' + bond.name + '</div>'
}
var initSelection = function(elem, cb) {
console.log(elem)
return elem
}
$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
search: term,
page: page || 1
}
},
results: function(bond, page) {
return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: initSelection
})
})
JSON 응답
{
error: null,
results: [
{
name: 'Some Name',
_id: 'Some Id'
},
{
name: 'Some Name',
_id: 'Some Id'
}
]
}
모든 것이 올바르게 당겨지는 것 같습니다만, 실제로 답을 선택해 박스에 입력할 수 없습니다.내 코드에 문제가 있나요?
다른 답변을 확인한 후 모든 콜에 대해 ID 필드를 전달해야 합니다.그렇지 않으면 입력이 비활성화됩니다.
이를 수정한 샘플 코드:
$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
id: function(bond){ return bond._id; },
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
search: term,
page: page || 1
}
},
results: function(bond, page) {
return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: initSelection
})
편집
이게 계속 상향투표가 되고 있기 때문에 제가 좀 더 자세히 설명해 드릴게요..select2() 메서드에서는 고유하고id모든 결과에 대한 필드입니다.다행히 해결 방법이 있습니다.그idoption에서는 다음과 같은 함수를 사용할 수 있습니다.
function( <INDIVIDUAL_RESULT> ) {
// Expects you to return a unique identifier.
// Ideally this should be from the results of the $.ajax() call.
}
제 고유 식별자가<RESULT>._id, 나는 단순하게return <RESULT>._id;
문제는 JSON 데이터에 "id"라는 속성이 필요하다는 것입니다.할 필요가 없다
id: 함수(본드){반환본드._id; }
데이터 자체에 ID가 없는 경우 다음과 같은 processResults 함수를 사용하여 추가할 수 있습니다.
$(YOUR FIELD).select2({
placeholder: "Start typing...",
ajax: {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "YOUR API ENDPOINT",
dataType: 'json',
data:
function (params) {
return JSON.stringify({ username: params.term });
},
processResults: function (data, page) {
var results = [];
$.each(JSON.parse(data.d), function (i, v) {
var o = {};
o.id = v.key;
o.name = v.displayName;
o.value = v.key;
results.push(o);
})
return {
results: results
};
},
cache: true
},
escapeMarkup: function (markup) { return markup;},
minimumInputLength: 1,
templateResult: function (people) {
if (people.loading)
return people.text;
var markup = '<option value="' + people.value + '">' + people.name + '</option>';
return markup;
},
templateSelection: function (people) { return people.value || people.text }
});
케이스도 조심하세요.사용하고 있었습니다.Id단, select2 expectsid누군가의 시간을 절약할 수 있다.
Dropped.on처럼.Caprica는 다음과 같이 말했습니다.모든 결과 항목에는 고유한 ID가 필요합니다.
모든 결과를 할당해 주세요.id고유 번호:
$('#searchDriver').select2({
ajax: {
dataType: 'json',
delay: 250,
cache: true,
url: '/users/search',
processResults: function (data, params) {
//data is an array of results
data.forEach(function (d, i) {
//Just assign a unique number or your own unique id
d.id = i; // or e.id = e.userId;
})
return {
results: data
};
},
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
다음 오류에 대해 많은 문제가 있습니다. Select 2에는 옵션 'ajax'가 허용되지 않습니다.
제 경우 select2 버전 3.5를 사용하고 있을 때 선택용으로 표시됩니다.따라서 버전 4.0으로 업그레이드하면 선택 항목에 숨겨진 입력이 첨부되지 않습니다.
옵션(이 경우 첫 번째 옵션)을 선택하려면select2요소를 프로그래밍 방식으로 트리거한 후return키를 누릅니다.
var e = jQuery.Event('keydown');
e.which = 13;
$('.offer_checkout_page_link select').select2('open');
$('.offer_checkout_page_link .select2-selection').trigger(e);
이 옵션을 클릭하면 해당 옵션을 클릭한 것처럼 "설정"됩니다.이 값을 수정하여 적절한 개수의 특정 옵션을 선택할 수 있습니다.down를 트리거하기 전에 키를 누릅니다.return 하나, 하나, 하나, 하나, 둘, 셋.
이 경우 (이 경우)를 때, 인 것 .enter가 선택 옵션을 선택하려면 선택 요소에 옵션 요소가 추가됩니다.가 로딩되면 알 수 .select2 do선선이 없습니다.option 요소를 한 후하는 것이 .그렇기 때문에 다른 솔루션에서는 jQuery를 사용하여 옵션 요소를 추가한 후 선택하는 것이 좋습니다.
되어 있었다.select2 a까지div 안 안 되네, 안 되네ajax as dataSource그게 도움이 될지도 몰라요
<div id="testSelect2"> </div>
이것을 로 변경했다.
<select id="testSelect2"> </select>
그리고 선택한 아이템을 보관하기 시작했습니다.
언급URL : https://stackoverflow.com/questions/14819865/select2-ajax-method-not-selecting
'programing' 카테고리의 다른 글
| 레일: active_model_serializer와의 깊이 중첩된 연관성을 직렬화하는 중 (0) | 2023.03.23 |
|---|---|
| Mongoose에서 Enum을 생성하여 사용하는 방법 (0) | 2023.03.23 |
| 구성 요소 정의에 forwardRef의 표시 이름이 없습니다. (0) | 2023.03.18 |
| jquery UI 정렬 가능한 위치를 DB에 저장 (0) | 2023.03.18 |
| 웹 사이트 콘솔에서 "JQMIGRATE: Migrate is installed, version 1.4.1 jquery-displaces.min.displaces?ver=1.4.1:2"는 무엇을 의미합니까? (0) | 2023.03.18 |