Come passare un parametro aggiuntivo al campo di completamento automatico Jquery?

Question

Sto utilizzando il completamento automatico JQuery in uno dei miei moduli.

Il modulo di base seleziona i prodotti dal mio database. Funziona alla grande, ma mi piacerebbe svilupparlo ulteriormente in modo che vengano restituiti solo i prodotti spediti da un determinato codice postale. Ho capito lo script di backend. Ho solo bisogno di elaborare il modo migliore per passare il codice postale a questo script.

Ecco come appare la mia forma.

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

Ed ecco il codice JQuery:

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

          //action 

           } 
}); 

Questo codice funziona in una misura. Ma restituisce solo il primo valore del codice postale indipendentemente dal valore effettivamente selezionato. Immagino che quello che sta succedendo sia che l'URL di origine sia caricato sul caricamento della pagina piuttosto che quando viene cambiato il menu di selezione. C'è un modo per aggirare questo? O c'è un modo migliore nel complesso per raggiungere il risultato che sto cercando?

Answer 1

È necessario utilizzare un approccio diverso per la chiamata source, in questo modo:

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

Questo formato consente di passare qualunque sia il valore è quando è eseguito, al contrario di quando è legato.

Answer 2

Credo che tu abbia ragione nel pensare che la tua chiamata a $("#product").autocomplete stia scattando sul caricamento della pagina. Forse è possibile assegnare un gestore onchange() per il menu di selezione:

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

e lo hanno invalidare la chiamata #product completamento automatico() e crearne uno nuovo.

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

Si consiglia la tua resetAutocomplete() chiamata ad essere un po 'più intelligente - come controllare se il codice di avviamento postale in realtà si differenzia dal ultimo valore - per salvare un paio di chiamate al server.

Answer 3

Questo lavoro per me. Sovrascrivere l'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

Questo non è quello di uomini complicati:

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