Jquery的Ajax自动完成:如何发送动态参数

Question

我在我的一个应用程序中使用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>

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

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

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

Answer 1

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

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

Answer 2

setOptions 方法有效，尽管我们需要在选择更改方法上调用它。因此将脚本更改为：

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