如何将额外的参数传递给 Jquery 自动完成字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3693560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I pass an extra parameter to Jquery Autocomplete field?
提问by matt
I'm using the JQuery Autocomplete in one of my forms.
我在我的一种表单中使用了 JQuery 自动完成功能。
The basic form selects products from my database. This works great, but I'd like to further develop so that only products shipped from a certain zipcode are returned. I've got the backend script figured out. I just need to work out the best way to pass the zipcode to this script.
基本表单从我的数据库中选择产品。这很好用，但我想进一步开发，以便只返回从某个邮政编码发货的产品。我已经弄清楚了后端脚本。我只需要找出将邮政编码传递给此脚本的最佳方法。
This is how my form looks.
这就是我的表格的样子。
<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>
And here is the JQuery code:
这是 JQuery 代码：
$("#product").autocomplete
({
source:"product_auto_complete.php?postcode=" + $('#zipcode').val() +"&",
minLength: 2,
select: function(event, ui){
//action
}
});
This code works to an extent. But only returns the first zipcode value regardless of which value is actually selected. I guess what's happening is that the source URL is primed on page load rather than when the select menu is changed. Is there a way around this? Or is there a better way overall to achieve the result I'm after?
这段代码在一定程度上有效。但无论实际选择哪个值，都只返回第一个邮政编码值。我猜发生的事情是源 URL 在页面加载时启动，而不是在选择菜单更改时启动。有没有解决的办法？或者有没有更好的方法来实现我所追求的结果？
回答by Nick Craver
You need to use a different approach for the sourcecall, like this:
您需要对source呼叫使用不同的方法，如下所示：
$("#product").autocomplete({
source: function(request, response) {
$.getJSON("product_auto_complete.php", { postcode: $('#zipcode').val() },
response);
},
minLength: 2,
select: function(event, ui){
//action
}
});
This format lets you pass whatever the value is when it's run, as opposed to when it's bound.
这种格式允许您在运行时传递任何值，而不是在绑定时传递。
回答by Daniel Kennedy
This is not to complicated men:
这不是复杂的男人：
$(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
});
});
回答by Bharat Parmar
jQuery("#whatJob").autocomplete(ajaxURL,{
width: 260,
matchContains: true,
selectFirst: false,
minChars: 2,
extraParams: { //to pass extra parameter in ajax file.
"auto_dealer": "yes",
},
});
回答by Paul Schreiber
I believe you are correct in thinking your call to $("#product").autocompleteis firing on page load. Perhaps you can assign an onchange() handler to the select menu:
我相信您认为您的呼叫$("#product").autocomplete是在页面加载时触发是正确的。也许您可以为选择菜单分配一个 onchange() 处理程序：
$("#zipcode").change(resetAutocomplete);
and have it invalidate the #productautocomplete() call and create a new one.
并让它使#productautocomplete() 调用无效并创建一个新调用。
function resetAutocomplete() {
$("#product").autocomplete("destroy");
$("#product").autocomplete({
source:"product_auto_complete.php?postcode=" + $('#zipcode').val(),
minLength: 2,
select: function(event, ui){... }
});
}
You may want your resetAutocomplete() call to be a little smarter -- like checking if the zip code actually differs from the last value -- to save a few server calls.
您可能希望 resetAutocomplete() 调用更智能一点——比如检查邮政编码是否与最后一个值实际上不同——以节省一些服务器调用。
回答by Knito Auron
This work for me. Override the event search:
这对我有用。覆盖事件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':[]
});
回答by SrinivasNyalam
$('#txtCropname').autocomplete('Handler/CropSearch.ashx', {
extraParams: {
test: 'new'
}
});
回答by Roman Losev
$('#product').setOptions({
extraParams: {
extra_parameter_name_to_send: function(){
return $("#source_of_extra_parameter_name").val();
}
}
})
回答by Sanjoy
Hope this one will help someone:
希望这个能帮助某人：
$("#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.
默认的“term”将被新的参数列表替换，因此您需要再次添加。
