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

【问题标题】：How do I pass an extra parameter to Jquery Autocomplete field?如何将额外的参数传递给 Jquery Autocomplete 字段？
【发布时间】：2010-09-12 02:53:39
【问题描述】：

我在我的一种表单中使用 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 在页面加载时启动，而不是在选择菜单更改时启动。有没有解决的办法？或者有没有更好的方法来实现我所追求的结果？

【问题讨论】：

标签： jquery-ui jquery jquery-ui-autocomplete

【解决方案1】：

您需要对source 调用使用不同的方法，如下所示：

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

这种格式允许您在运行时传递任何值，而不是在绑定时传递。

【讨论】：

嗯。我似乎无法使用这种方法使其工作。虽然如果我可以的话会很棒，因为这似乎是解决问题的一种更优雅的方式。 JSON 数据的结构是否需要不同？我还在源文件中使用 $_GET['postcode'] && $_GET['term'] 吗？
@matt - 您只需将$_GET['postcode'] 与上面的代码一起使用...如果您想在那里使用术语，请将其添加到数据参数中：{ term: request.term, postcode: $('#zipcode').val() }跨度>
@Nick 仍然无法正常工作。我进行了更改，但自动完成功能未能实现。 Jquery 对我来说很新，所以我不确定如何调试，但它似乎阻止了我的 javascript 文件中的所有代码工作。我不确定什么可能不合适，但“request.term”对我来说是新的。澄清一下，这是自动完成在您键入时创建的“术语”，对吧？
@King - response 是一个在被调用时传入的函数，它是一个回调函数，它本身带有一个参数，响应文本或数据......该函数将数据粘贴在自动完成中小部件。还提供了request，它是一个具有term 属性的对象，这是当前在框中键入的内容，它在小部件调用此方法时传入。
似乎是最干净的方法。我可能会建议在答案本身中提及term: request.term，而不仅仅是作为评论。

【解决方案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
});
});

【讨论】：

【解决方案3】：

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

【讨论】：

现在只称为参数。参数：{“auto_dealer”：“是”}，
比其他答案更容易
应该是最佳答案

【解决方案4】：

我相信您认为您对$("#product").autocomplete 的调用在页面加载时触发是正确的。也许您可以为选择菜单分配一个 onchange() 处理程序：

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

并让它使#product autocomplete() 调用无效并创建一个新调用。

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

您可能希望您的 resetAutocomplete() 调用更智能——比如检查邮政编码是否与最后一个值不同——以节省一些服务器调用。

【讨论】：

销毁自动完成小部件并重新创建它非常浪费，您应该按原意使用source 参数...
@Footniko 加载后，我需要重新创建它以更改值，我正在使用 extraParams 并且如果不这样做它不会更新其值！

【解决方案5】：

这对我有用。覆盖事件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':[]
});

【讨论】：

在搜索时而不是在页面加载时在源 url 上设置 GET 变量的简单解决方案。比在源函数中调用 AJAX 更容易阅读

【解决方案6】：

$('#product').setOptions({
    extraParams: {
        extra_parameter_name_to_send: function(){
            return $("#source_of_extra_parameter_name").val();
        }
    }
})

【讨论】：

【解决方案7】：

$('#txtCropname').autocomplete('Handler/CropSearch.ashx', {
    extraParams: {
        test: 'new'
    }
});

【讨论】：

【解决方案8】：

希望这个对某人有所帮助：

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

默认的“术语”将被新的参数列表替换，因此您需要重新添加。

【讨论】：