How do I pass an extra parameter to Jquery Autocomplete field?

I'm using the JQuery Autocomplete in one of my forms.

The basic form selects products from my database. This works great, but I'd like to further develop so that only products shipped from a certain zipcode are returned. I've got the backend script figured out. I just need to work out the best way to pass the zipcode to this script.

This is how my form looks.

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

And here is the JQuery code:

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

This code works to an extent. But only returns the first zipcode value regardless of which value is actually selected. I guess what's happening is that the source URL is primed on page load rather than when the select menu is changed. Is there a way around this? Or is there a better way overall to achieve the result I'm after?

You need to use a different approach for the source call, like this:

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

This format lets you pass whatever the value is when it's run, as opposed to when it's bound.

This is not to complicated men:

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

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

I believe you are correct in thinking your call to $("#product").autocomplete is firing on page load. Perhaps you can assign an onchange() handler to the select menu:

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

and have it invalidate the #product autocomplete() call and create a new one.

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

You may want your resetAutocomplete() call to be a little smarter -- like checking if the zip code actually differs from the last value -- to save a few server calls.

This work for me. Override the event 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':[]
});

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

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

Hope this one will help someone:

$("#txt_venuename").autocomplete({
    source: function(request, response) {
    $.getJSON('<?php echo base_url(); ?>admin/venue/venues_autocomplete', 
        { 
            user_id: <?php echo $user_param_id; ?>, 
            term: request.term 
        }, 
      response);
    },
    minLength: 3,
    select: function (a, b) {            
        var selected_venue_id = b.item.v_id;
        var selected_venue_name = b.item.label;            
        $("#h_venueid").val(selected_venue_id);
        console.log(selected_venue_id);            
    }
});

The default 'term' will be replaced by the new parameters list, so you will require to add again.