如何将额外的参数传递给Jquery自动完成字段?

我正在其中一种表单中使用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是在页面加载时准备好的,而不是在更改选择菜单时准备的。 有没有解决的办法? 还是总体上有更好的方法来实现我追求的结果?

matt asked 2019-11-08T13:54:19Z
8个解决方案
85 votes

您需要对source调用使用其他方法,如下所示:

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

这种格式允许您传递值运行时(绑定时)的值。

Nick Craver answered 2019-11-08T13:54:53Z
26 votes

这不是复杂的男人:

$(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
});
});
Daniel Kennedy answered 2019-11-08T13:55:17Z
6 votes

我认为您认为对#product的呼叫在页面加载时触发是正确的。 也许您可以将一个onchange()处理函数分配给选择菜单:

$("#zipcode").change(resetAutocomplete);

并使#product680 autocomplete()调用无效并创建一个新的调用。

function resetAutocomplete() {
    $("#product").autocomplete("destroy");
    $("#product").autocomplete({
         source:"product_auto_complete.php?postcode=" + $('#zipcode').val(),
         minLength: 2,
         select: function(event, ui){... }
    });
}

您可能希望您的resetAutocomplete()调用更聪明一些(例如检查邮政编码是否与上一个值实际不同),以节省一些服务器调用。

Paul Schreiber answered 2019-11-08T13:56:03Z
5 votes
jQuery("#whatJob").autocomplete(ajaxURL,{
    width: 260,
    matchContains: true,
    selectFirst: false,
    minChars: 2,
    extraParams: {  //to pass extra parameter in ajax file.
        "auto_dealer": "yes",
    },
});
Bharat Parmar answered 2019-11-08T13:56:21Z
3 votes

这项工作对我来说。 覆盖事件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':[]
});
Knito Auron answered 2019-11-08T13:56:47Z
0 votes
$('#product').setOptions({
    extraParams: {
        extra_parameter_name_to_send: function(){
            return $("#source_of_extra_parameter_name").val();
        }
    }
})
Roman Losev answered 2019-11-08T13:57:06Z
0 votes
$('#txtCropname').autocomplete('Handler/CropSearch.ashx', {
    extraParams: {
        test: 'new'
    }
});
SrinivasNyalam answered 2019-11-08T13:57:25Z
0 votes

希望这个可以帮助某人:

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

默认的“条款”将被新的参数列表取代,因此您需要再次添加。

Sanjoy answered 2019-11-08T13:57:58Z
translate from https://stackoverflow.com:/questions/3693560/how-do-i-pass-an-extra-parameter-to-jquery-autocomplete-field