Completamento automatico Ajax per Jquery: Come inviare parametri dinamici

Question

sto usando Ajax Autocomplete for Jquery (http://www.devbridge.com/projects/autocomplete/jquery/) in una delle mie applicazioni. Il modulo di ricerca simile a questa:

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

e la configurazione di completamento automatico è simile al seguente:

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

Ora il problema è nel backend ho diversi gestori che generano risultati per i diversi tipi di entità che l'utente sceglierebbe attraverso l'opzione select nel modulo.

Per impostazione predefinita entity_type è place che viene passato correttamente al gestore nel back-end. Tuttavia, ciò che voglio è quando una persona seleziona un'entità diversa dalla casella di selezione nel modulo params: {entity_type:$('#top_search_select').val()} nella configurazione dello script viene anche aggiornata.

Qualsiasi aiuto o idea sarà molto apprezzato. Grazie.

Answer 1

Il metodo setOptions ha funzionato, anche se è necessario chiamarlo sul metodo di selezione dei cambiamenti. Quindi cambiare script per:

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

e On funzione pronti documento aggiungere questo:

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

Answer 2

Come il sito plugins specifica nell'uso qui http://www.devbridge.com/projects/autocomplete/jquery/ ha un metodo setOptions sull'oggetto restituito che è possibile utilizzare in seguito per modificare le opzioni in modo dinamico.

aggiungere un gestore onchange sull'elemento selezionare e modificare le opzioni params ogni volta l'utente seleziona un valore diverso come

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


}); 

Si dovrebbe mettere tutto il codice all'interno document ready.

Answer 3

potrebbe essere una vecchia questione, ma sento che qui è il modo migliore per farlo:

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

Answer 4

In alternativa, è possibile specificare i parametri utilizzando una funzione che viene valutata immediatamente prima dell'invio della richiesta Ajax.

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

Answer 5

La risposta di Pez non ha funzionato per me solo una leggera variazione con "extraParams". Questo rende i parametri dinamici anziché impostati sul caricamento della pagina ...

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