Jquery Autocomplete 필드에 추가 매개 변수를 어떻게 전달합니까?
내 양식 중 하나에서 JQuery 자동 완성을 사용하고 있습니다.
기본 양식은 내 데이터베이스에서 제품을 선택합니다. 이것은 훌륭하게 작동하지만 특정 우편 번호에서 배송 된 제품 만 반환되도록 더 개발하고 싶습니다. 백엔드 스크립트를 파악했습니다. 이 스크립트에 우편 번호를 전달하는 가장 좋은 방법을 찾아야합니다.
이것이 내 양식의 모습입니다.
<form>
<select id="zipcode">
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
</select>
<input type="text" id="product"/>
<input type="submit"/>
</form>
다음은 JQuery 코드입니다.
$("#product").autocomplete
({
source:"product_auto_complete.php?postcode=" + $('#zipcode').val() +"&",
minLength: 2,
select: function(event, ui){
//action
}
});
이 코드는 어느 정도 작동합니다. 그러나 실제로 선택된 값에 관계없이 첫 번째 우편 번호 값만 반환합니다. 무슨 일이 일어나고 있는지는 선택 메뉴가 변경 될 때가 아니라 페이지로드시 소스 URL이 준비된다는 것입니다. 이 문제를 해결할 방법이 있습니까? 아니면 내가 원하는 결과를 얻는 더 나은 방법이 있습니까?
다음 source과 같이 호출에 대해 다른 접근 방식을 사용해야합니다 .
$("#product").autocomplete({
source: function(request, response) {
$.getJSON("product_auto_complete.php", { postcode: $('#zipcode').val() },
response);
},
minLength: 2,
select: function(event, ui){
//action
}
});
이 형식을 사용하면 바인딩 될 때가 아니라 실행될 때 값이 무엇이든 전달할 수 있습니다 .
이것은 복잡한 남성이 아닙니다.
$(document).ready(function() {
src = 'http://domain.com/index.php';
// Load the cities straight from the server, passing the country as an extra param
$("#city_id").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
term : request.term,
country_id : $("#country_id").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
});
$("#product").autocomplete페이지로드시 호출 이 발생 한다고 생각하는 것이 맞다고 생각합니다 . 선택 메뉴에 onchange () 핸들러를 할당 할 수 있습니다.
$("#zipcode").change(resetAutocomplete);
#productautocomplete () 호출을 무효화하고 새 호출을 만듭니다.
function resetAutocomplete() {
$("#product").autocomplete("destroy");
$("#product").autocomplete({
source:"product_auto_complete.php?postcode=" + $('#zipcode').val(),
minLength: 2,
select: function(event, ui){... }
});
}
우편 번호가 실제로 마지막 값과 다른지 확인하는 것과 같이 resetAutocomplete () 호출을 좀 더 스마트하게하여 몇 가지 서버 호출을 절약 할 수 있습니다.
jQuery("#whatJob").autocomplete(ajaxURL,{
width: 260,
matchContains: true,
selectFirst: false,
minChars: 2,
extraParams: { //to pass extra parameter in ajax file.
"auto_dealer": "yes",
},
});
이것은 나를 위해 일합니다. 이벤트 재정의 search:
jQuery('#Distribuidor_provincia_nombre').autocomplete({
'minLength':0,
'search':function(event,ui){
var newUrl="/conf/general/provincias?pais="+$("#Distribuidor_pais_id").val();
$(this).autocomplete("option","source",newUrl)
},
'source':[]
});
$('#product').setOptions({
extraParams: {
extra_parameter_name_to_send: function(){
return $("#source_of_extra_parameter_name").val();
}
}
})
$('#txtCropname').autocomplete('Handler/CropSearch.ashx', {
extraParams: {
test: 'new'
}
});
이것이 누군가에게 도움이되기를 바랍니다.
$("#txt_venuename").autocomplete({
source: function(request, response) {
$.getJSON('<?php echo base_url(); ?>admin/venue/venues_autocomplete',
{
user_id: <?php echo $user_param_id; ?>,
term: request.term
},
response);
},
minLength: 3,
select: function (a, b) {
var selected_venue_id = b.item.v_id;
var selected_venue_name = b.item.label;
$("#h_venueid").val(selected_venue_id);
console.log(selected_venue_id);
}
});
The default 'term' will be replaced by the new parameters list, so you will require to add again.
ReferenceURL : https://stackoverflow.com/questions/3693560/how-do-i-pass-an-extra-parameter-to-jquery-autocomplete-field
'Program Club' 카테고리의 다른 글
| 반환과 동일하게 false를 반환합니까? (0) | 2020.12.30 |
|---|---|
| Spring MVC에서 BindingResult 인터페이스의 사용은 무엇입니까? (0) | 2020.12.30 |
| 최소 / 최대 값 사이의 숫자를 제한하기 위해 JavaScript를 어떻게 사용할 수 있습니까? (0) | 2020.12.29 |
| col.names없이 CSV 내보내기 (0) | 2020.12.29 |
| Maven의 기본 빌드 프로필 (0) | 2020.12.29 |