Ajax Autocompletar para Jquery: Cómo enviar los parámetros dinámicos

Question

Estoy usando Ajax Autocomplete for Jquery (http://www.devbridge.com/projects/autocomplete/jquery/) en uno de mi aplicación. El formulario de búsqueda se ve algo como esto:

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

y la configuración de autocompletar se ve así:

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

Ahora el problema está en el back-end tengo diferentes controladores que generan resultados para diferentes tipos de entidad que el usuario elegiría a través de la opción de selección en el formulario.

Por defecto entity_type es place que se le pasa muy bien al controlador en el back-end. Sin embargo, lo que quiero es que cuando una persona selecciona una entidad diferente del cuadro de selección en el formulario params: {entity_type:$('#top_search_select').val()} en la configuración del script también se actualice.

Cualquier ayuda o idea será muy apreciada. Gracias.

Answer 1

El método setOptions funcionó, aunque necesitamos llamarlo en el método de selección de cambios. Así que cambiar secuencia de comandos para:

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

y en función de lista de documentos añadir lo siguiente:

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

Answer 2

Como su sitio de complementos especifica en el uso aquí http://www.devbridge.com/projects/autocomplete/jquery/ tiene un método setOptions en el objeto que devuelve que puede usar más adelante para cambiar las opciones dinámicamente.

agregar un controlador onchange en el elemento de seleccionar y cambiar las opciones params cada vez que el usuario selecciona un valor diferente como

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


}); 

Usted debe poner todo el código dentro de document ready.

Answer 3

podría ser una vieja pregunta, pero siento que esta es la mejor manera de hacerlo:

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

Answer 4

Alternativamente, puede especificar los parámetros usando una función que se evalúa justo antes de enviar la solicitud ajax.

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

Answer 5

La respuesta de Pez no funcionó para mí, solo una pequeña variación con 'extraParams'. Esto hace que los parámetros sean dinámicos en lugar de configurados en la carga de la página ...

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