如何将额外参数传递给Jquery Autocomplete字段？

Question

我在我的一个表单中使用JQuery Autocomplete.

基本表单从我的数据库中选择产品.这很好用,但我想进一步开发,以便只返回从某个邮政编码发货的产品.我找到了后端脚本.我只需要找出将zipcode传递给此脚本的最佳方法.

这是我的表单看起来的样子.

<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

                                 }
});

此代码在某种程度上起作用.但只返回第一个zipcode值,无论实际选择哪个值.我想发生的事情是源URL是在页面加载时启动而不是在更改选择菜单时.有没有解决的办法？或者总体上有更好的方法来实现我追求的结果吗？

Answer 1

您需要为source调用使用不同的方法,如下所示:

$("#product").autocomplete({
  source: function(request, response) {
    $.getJSON("product_auto_complete.php", { postcode: $('#zipcode').val() }, 
              response);
  },
  minLength: 2,
  select: function(event, ui){
    //action
  }
});

这种格式允许您传递运行时的值,而不是绑定时的值.

Answer 2

这不是复杂的男人:

$(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
});
});

Answer 3

我相信你认为你的呼叫$("#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()调用更加智能 - 例如检查邮政编码是否与上一个值实际不同 - 以节省一些服务器调用.

Answer 4

jQuery("#whatJob").autocomplete(ajaxURL,{
    width: 260,
    matchContains: true,
    selectFirst: false,
    minChars: 2,
    extraParams: {  //to pass extra parameter in ajax file.
        "auto_dealer": "yes",
    },
});