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> 

現在的問題是在後端我有一個生成不同類型的實體的結果不同的處理程序用戶將通過表格中的選擇選項進行選擇。

默認entity_type是place這是正好傳遞給後端的處理程序。然而，我想要的是，當一個人從腳本配置中的params: {entity_type:$('#top_search_select').val()}形式的選擇框中選擇不同的實體時，也會得到更新。

任何幫助或想法將不勝感激。謝謝。

Answer 1

雖然我們需要在選擇更改方法上調用它，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()}}); 
}); 

Answer 2

由於您的插件網站在此處指定了使用方法http://www.devbridge.com/projects/autocomplete/jquery/它在返回的對象上有一個setOptions方法，您可以稍後使用它來動態更改選項。

添加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。

Answer 3

可能是一個老問題，但我覺得這裏的做到這一點的最好辦法：

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

Answer 4

或者，您可以使用在發送ajax請求之前評估的函數來指定參數。

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

Answer 5

佩斯的答案對我來說並不適用，只是與'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() ; 
     } 
    } 
});