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

i am using Ajax Autocomplete for Jquery ( http://www.devbridge.com/projects/autocomplete/jquery/ ) in one of my application. The Search Form looks something like this :

在我的一个应用程序中，我使用Ajax自动完成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>

and the autocomplete configuration looks like this:

自动完成配置如下:

<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>

Now the problem is in the backend i have different handlers that generate results for different types of entity that user would choose through the select option in the form.

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

By Default entity_type is place which is being passed just fine to the handler in the backend. However, what i want is when a person selects a different entity from the select box in the form params: {entity_type:$('#top_search_select').val()} in the script configuration also gets updated.

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

Any help or ideas will be much appreciated. Thanks.

如有任何帮助或想法，我们将不胜感激。谢谢。

5 个解决方案

#1

Alternatively, you can specify the params using a function which is evaluated just before the ajax request is sent.

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

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

#2

Might be an old question, but I feel that here's the best way to do it:

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

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

#3

The setOptions method worked, though we need to call it on the selects change method. So change script to:

setOptions方法可以工作，但是我们需要在select change方法上调用它。所以改变脚本:

<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>

and On document ready function add this :

在文件准备功能中添加如下内容:

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

#4

As your plugins site specifies in the usage here http://www.devbridge.com/projects/autocomplete/jquery/ it has a setOptions method on the object it returns which you can use later to change options dynamically.

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

Add a onchange handler on the select element and change the params options each time user selects a different value like

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


});

You should put all your code inside document ready.

您应该把所有的代码都放在文档中。

#5

Pez's answer didnt work for me just a slight variation with 'extraParams'. This makes the parameters dynamic rather than set on page load...

Pez的回答对我来说并没有什么用，只是和“婚外恋”稍有不同。这使得参数是动态的，而不是在页面加载上设置的…

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

#1