Jquery 的 Ajax 自动完成：如何发送动态参数答案

【问题标题】：Ajax Autocomplete for Jquery : How To Send Dynamic ParametersJquery 的 Ajax 自动完成：如何发送动态参数
【发布时间】：2012-06-07 18:32:27
【问题描述】：

我在我的一个应用程序中使用Ajax Autocomplete for Jquery (http://www.devbridge.com/projects/autocomplete/jquery/)。搜索表单看起来像这样：

<form id="topsearch" method="POST" action="/searchAll"><input type="text" class="searchform" name="q" id="q" value="Country, City, Hotel or a Tourist Attraction" o    nfocus="clearInput(this);" onblur="defaultInput(this);" />
  <select id="top_search_select" name="entity_type">
     <option value="country">Countries</option>
     <option value="city">Cities</option>
     <option value="place" selected="selected">Tourist Attractions</option>
     <option value="hotel">Hotels</option>
  </select>
  <input type="submit" name="topsearch" class="submit" value="SEARCH" title="SEARCH"/>
</form>

自动完成配置如下所示：

<script type="text/javascript">
 //<![CDATA[
   var a = $('#q').autocomplete({
     serviceUrl:'/search',
     delimiter: /(,|;)\s*/, // regex or character
     maxHeight:400,
     width:325,
     zIndex: 9999,
     params: {entity_type:$('#top_search_select').val()},
     deferRequestBy: 0, //miliseconds
     noCache: false, //default is false, set to true to disable caching
     onSelect: function(value, data){window.location.replace(data);},
   });
 //]]>
</script>

现在问题出在后端，我有不同的处理程序，它们为用户通过表单中的选择选项选择的不同类型的实体生成结果。

默认情况下entity_type 是place，它可以很好地传递给后端的处理程序。但是，我想要的是当一个人从脚本配置中params: {entity_type:$('#top_search_select').val()} 形式的选择框中选择不同的实体时，也会更新。

任何帮助或想法将不胜感激。谢谢。

【问题讨论】：

标签： jquery ajax autocomplete

【解决方案1】：

正如您的插件站点在 http://www.devbridge.com/projects/autocomplete/jquery/ 的用法中指定的那样，它在返回的对象上有一个 setOptions 方法，您可以稍后使用它来动态更改选项。

在 select 元素上添加 onchange 处理程序，并在每次用户选择不同的值时更改 params 选项，例如

$(function(){
  var ac = $('#q').autocomplete({
    serviceUrl:'/search',
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:325,
    zIndex: 9999,
    params: {entity_type:$('#top_search_select').val()},
    deferRequestBy: 0, //miliseconds
    noCache: false, //default is false, set to true to disable caching
    onSelect: function(value, data){window.location.replace(data);},
  });

  $("#top_search_select").change(function() {
      ac.setOptions({params:{entity_type:$(this).val()}});
  });


});

您应该将所有代码放入document ready。

【讨论】：

感谢您的快速回复。但是，由于某种原因，源方法不起作用。不过，我已经使用 setOptions 消息解决了它。
抱歉，我以为您使用的是 jQuery UI 自动完成功能。更新了答案。 :)

【解决方案2】：

setOptions 方法有效，但我们需要在 selects 更改方法上调用它。所以将脚本更改为：

<script type="text/javascript">
//<![CDATA[
  var a = $('#q').autocomplete({
    serviceUrl:'/search',
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:325,
    zIndex: 9999,
    params: {entity_type:$('#top_search_select').val()},
    deferRequestBy: 0, //miliseconds
    noCache: false, //default is false, set to true to disable caching
    onSelect: function(value, data){window.location.replace(data);},
  });
  a.setOptions({params:{entity_type:$('#top_search_select').val()}});
//]]>
</script>

并在文档准备功能上添加：

$("#top_search_select").change(function() {
  a.setOptions({params:{entity_type:$('#top_search_select').val()}});
});

【讨论】：

我尝试使用您的解决方案，但无济于事。传递动态参数需要做什么。
可能调用“setOptions”方法：/

【解决方案3】：

可能是一个老问题，但我觉得这是最好的方法：

$('#q').autocomplete({
    ...
    onSearchStart: function(q) {
        q.entity_type = $('#top_search_select').val();
    }
    ...
});

【讨论】：

或者，您可以将函数用于 params 选项（请参阅我的答案）。

【解决方案4】：

或者，您可以使用在发送 ajax 请求之前评估的函数指定参数。

$('#q').autocomplete({
    ...
    params: {
        'entity_type': function() {
            return $('#top_search_select').val();
        }
    }
    ...
});

【讨论】：

这是最干净、最简单的处理方式。与每次发生变化时调用 setOptions() 的解决方案相比，它是一个更好的解决方案。

【解决方案5】：

Pez 的回答对我不起作用，只是与“extraParams”略有不同。这使得参数是动态的，而不是在页面加载时设置...

$("#field").autocomplete('pageurl.php', {     
   width: 240,
   matchContains: true,
   mustMatch: false,
   selectFirst: false,
   extraParams: {
      start:function () { 
           return $("#start_date").val(); 
      },
      end: function () {
           return $("#end_date").val() ;
      }
  } 
});

【讨论】：

DevBridge 的 AutoComplete 中没有“extraParams”这样的参数。您可能正在使用不同的自动完成脚本。

【解决方案6】：

上面的所有答案都对我不起作用（我怀疑是因为我通过 ajaxSettings 变量传递“POST”数据，这可能会影响“params”，但我没有仔细检查）。

无论如何，所有 cmets 都给出了很好的提示，我想出了以下几点：

var data={          
    'phrase': function() {
        return $('#ajax_post').val();
    },
    'activity_id': function() {
        return $('#activity_id').val();
    }
}

var options = {
    noCache: true,
    transformResult: function(response) {
        //whatever
    },
    onSelect: function(suggestion) {
        //whatever
    },  
    serviceUrl: "MyPHP.php",
    ajaxSettings: {
        dataType: "json",
        method: "POST",
        data: data
    }
};  

$("#ajax_post").autocomplete(options);

所以我能够将 ajax_post 和 activity_id 输入字段的内容传递给 PHP 脚本。

请注意，这样做还不够：

'phrase': $('#ajax_post').val()

因为正如其他答案中提到的，值是静态的。

【讨论】：