Dynamic 'postData' values

[jstayton]

Hey Corey,

I've run into a situation where I need to send the value of a <select> as a 'postData' value. (I don't think this issue is limited to <select> inputs — just using it for example.) Here's what I have currently:

$('#myField').autoComplete({
  ajax: '/my/url',
  postData: {
    select: $('#mySelect > option:selected').val()
  }
});

The problem is that once the value is set during the initialization of autoComplete(), any change to the <select> value isn't reflected in the 'postData' sent with the auto complete request. It continually uses the initial value.

How would you recommend I handle this? I've thought about destroying and re-creating the auto complete on any change to the <select>, but that doesn't seem ideal. Thanks for your input!

[codenothing]

There's a few ways to handle this, here's the two I would suggest:

$('#myField').autoComplete({
  ajax: 'url',
  postFormat: function( event, ui ) {
    ui.data.select = $('#myselect').val();
    return ui.data;
  }
});

Or you can just setup a change handler on your select and push to your postData object.

$('#mySelect').change(function(){
  $('#myField').autoComplete('settings', {
    postData: {
      select: $('#mySelect').val()
    }
  });
});

[jstayton]

The first option worked great — thanks!