¿Cómo paso un parámetro adicional al campo Autocompletar de Jquery?

Question

Estoy usando el autocompletado de JQuery en uno de mis formularios.

La forma básica selecciona los productos de mi base de datos. Esto funciona muy bien, pero me gustaría seguir desarrollando para que solo se devuelvan los productos enviados desde un determinado código postal. Tengo el script de backend resuelto. Solo necesito averiguar la mejor manera de pasar el código postal a este script.

Así es como se ve mi formulario.

<form> 

<select id="zipcode"> 

<option value="2000">2000</option> 
<option value="3000">3000</option> 
<option value="4000">4000</option> 

</select> 

<input type="text" id="product"/> 

<input type="submit"/> 

</form> 

Y aquí es el código de jQuery:

$("#product").autocomplete 
({ 
    source:"product_auto_complete.php?postcode=" + $('#zipcode').val() +"&", 
    minLength: 2, 
    select: function(event, ui){ 

          //action 

           } 
}); 

Este código funciona hasta cierto punto. Pero solo devuelve el primer valor de código postal independientemente de qué valor se seleccione realmente. Supongo que lo que sucede es que la URL de origen está cebada en la carga de la página en lugar de cuando se cambia el menú de selección. ¿Hay alguna forma de evitar esto? ¿O hay una mejor manera en general para lograr el resultado que estoy buscando?

Answer 1

Es necesario utilizar un enfoque diferente para la llamada source, así:

$("#product").autocomplete({ 
    source: function(request, response) { 
    $.getJSON("product_auto_complete.php", { postcode: $('#zipcode').val() }, 
       response); 
    }, 
    minLength: 2, 
    select: function(event, ui){ 
    //action 
    } 
}); 

Este formato permite pasar cualquiera que sea el valor es cuando se ejecuta, en contraposición a cuando es obligado.

Answer 2

Creo que tiene razón al pensar que su llamada al $("#product").autocomplete está activando la carga de la página. Tal vez se puede asignar un controlador onchange() para el menú de selección:

$("#zipcode").change(resetAutocomplete); 

y lo han invalidar la llamada #product autocompletar() y crear una nueva.

function resetAutocomplete() { 
    $("#product").autocomplete("destroy"); 
    $("#product").autocomplete({ 
     source:"product_auto_complete.php?postcode=" + $('#zipcode').val(), 
     minLength: 2, 
     select: function(event, ui){... } 
    }); 
} 

Es posible que desee que su resetAutocomplete() para ser un poco más inteligente - como la comprobación de si el código postal realidad es diferente del último valor - para guardar un par de llamadas del servidor.

Answer 3

Esto funciona para mí. Anular el evento search:

jQuery('#Distribuidor_provincia_nombre').autocomplete({ 
    'minLength':0, 
    'search':function(event,ui){ 
     var newUrl="/conf/general/provincias?pais="+$("#Distribuidor_pais_id").val(); 
     $(this).autocomplete("option","source",newUrl) 
    }, 
    'source':[] 
}); 

Answer 4

jQuery("#whatJob").autocomplete(ajaxURL,{ 
    width: 260, 
    matchContains: true, 
    selectFirst: false, 
    minChars: 2, 
    extraParams: { //to pass extra parameter in ajax file. 
     "auto_dealer": "yes", 
    }, 
}); 

Answer 5

Esto no es para los hombres complicados:

$(document).ready(function() { 
src = 'http://domain.com/index.php'; 

// Load the cities straight from the server, passing the country as an extra param 
$("#city_id").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: src, 
      dataType: "json", 
      data: { 
       term : request.term, 
       country_id : $("#country_id").val() 
      }, 
      success: function(data) { 
       response(data); 
      } 
     }); 
    }, 
    min_length: 3, 
    delay: 300 
}); 
}); 

Answer 6

$('#txtCropname').autocomplete('Handler/CropSearch.ashx', { 
    extraParams: { 
     test: 'new' 
    } 
}); 

Answer 7

$('#product').setOptions({ 
    extraParams: { 
     extra_parameter_name_to_send: function(){ 
      return $("#source_of_extra_parameter_name").val(); 
     } 
    } 
})