jquery select2 - 작동하지 않음
저는 select2 plugin(ivaynberg.github.io/select2) 을 사용하고 있습니다.드롭다운(선택)을 표시하려고 합니다.그것은 모든 항목을 데이터로 얻고 있습니다.옵션으로 php.그러나 select2는 자동 완성 플러그인이며 클라이언트가 입력한 검색어를 검색하고 일치하는 결과만 표시해야 합니다.현재 모든 항목을 표시하고 검색 결과를 가져오지 않습니다.내 언어에 미안합니다.
data. php가 이 말을 반복하고 있습니다.
[{
"id": "1",
"text": "item1",
"exercise": "blah text"
}, {
"id": "2",
"text": "item2"
}
]
코드는:
$(document).ready(function () {
$('#thisid').select2({
minimumInputLength: 2,
ajax: {
url: "data.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
});
입력값은 다음과 같습니다.
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
단서를 찾고 싶습니다. 저는 이 플러그인을 처음 접해서 사례를 살펴보느라 하루를 보냈습니다.
표준에 연결된 경우 select2는 AJAX를 수행하지 않습니다.select폼 컨트롤숨겨진 곳에 부착해야 합니다.inputAJAX를 통해 로드하도록 제어합니다.
업데이트: Select24.0에서 수정되었습니다.릴리스 전 노트에서:
표준과의 정합성
<select>모든 데이터 어댑터에 대한 요소, 숨겨진 필요성 제거<input>요소들.
이는 이들의 예제 섹션에서도 기능적으로 확인할 수 있습니다.
사용자 2315153이 여러 개의 원격 값을 수신하고 싶어하며, ajax 호출이 포함된 select2()를 <select> 요소에 잘못 할당한 것 같습니다.
원격 값을 얻는 올바른 방법은 일반 <입력> 요소를 사용하는 것이며, 원하는 여러 개의 값이 있으면 메서드 호출 시 "multiple" 매개 변수를 알려줍니다.예:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
minimumInputLength: 2,
multiple: true,
ajax: {
...
<select> 요소를 원격 값에 사용할 수 없습니다.
업데이트: select 24.0.0 현재 숨겨진 입력이 더 이상 사용되지 않습니다.
https://select2.github.io/announcements-4.0.html#hidden-input
이것은 다음을 의미합니다.select2 플러그인을 속성으로 지정하는 입력 대신 SELECT 태그를 사용합니다.
주의: 서버에서 어떤 형식의 json도 쉽게 사용할 수 있습니다.그냥 "process Results"를 사용해서 하면 됩니다.
예:
<select id='thisid' class='select2-input select2'></select>
<script>
$("#thisid").select2({
multiple: true,
closeOnSelect: true,
ajax: {
url: "myurl",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) { //json parse
console.log("processing results");
//Transform your json here, maybe using $.map jquery method
return {
results: yourTransformedJson
};
},
cache: (maybe)true
}
});
</script>
코드를 써봤는데 잘 되네요.jquery framework를 포함하지 않거나 js와 cs의 경로를 확인하지 않는 것 같습니다.
<!DOCTYPE html>
<html>
<head>
<link href="select2.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="select2.min.js"></script>
<script>
$(document).ready(function() {
$('#thisid').select2({
minimumInputLength: 2,
ajax: {
url: "data.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
});
</script>
</head>
<body>
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
</body>
</html>
나는 숨겨진 입력 요소를 가지고 갈 필요가 없다고 생각합니다.ajax call에서 평이한 html 데이터를 가져와 설정한 후 init select2 reset method를 시도할 수 있습니다.코드 조각은 다음과 같습니다.
HTML
<select id="select" name="select" class="select2">
<option value="" selected disabled>Please Select Above Field</option>
</select>
자바스크립트
$.ajax({
type: "POST",
cache:false,
url: YOUR_AJAX_URL,
success: function(response)
{
$('#select').html(response);
}
});
$('#select').select2("val","");
Ajax 응답:
<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
많은 독서 끝에 select2.js 자체를 바꾸기로 했습니다.
2109호선에서 로 바꿉니다.
this.focusser.attr("id", "s2id_"+this.select.context.id);
입력 태그가 그런 경우
<select id="fichier">
따라서 목록을 검색하는 입력 태그의 ID는 s2id_fichier_search입니다.
제가 알기로는 충돌이 있어서는 안 되며, 이를 통해 동일한 페이지에 여러 개의 select2를 가지고 이벤트(예: .get, .post 포함)를 통해 기능을 실행할 수 있습니다.
$(function() {
$('#s2id_fichier_search').keyup(function() {
console.log('Be Practical')
})
}
그래서 이 상황은 당신이 사용하는 것처럼 실행될 것입니다.
<select id="fichier" onkeyup="console.log('Be Practical')">
저의 경우, 이전 버전의 select2 라이브러리가 문제를 일으켰습니다. 웹 페이지에 js와 css의 최신 버전을 포함시키는지 확인하세요.
언급URL : https://stackoverflow.com/questions/16190088/jquery-select2-not-working
'programing' 카테고리의 다른 글
| 두 열의 좌측 외측 접합 성능 문제 (0) | 2023.10.07 |
|---|---|
| 오토젠의 직업은 무엇입니까?Linux에서 c++ 패키지를 구축할 때 sh (0) | 2023.10.07 |
| 두 개 이상의 Wordpress Cron을 실행하여 서로 다른 고정 간격으로 데이터베이스를 업데이트합니다. (0) | 2023.10.07 |
| AngularJS bootstrap.ui modal이 표시되지 않습니다. (0) | 2023.10.02 |
| 이벤트 방법 이벤트 방법 이벤트 방법 (0) | 2023.10.02 |