Jquery Autocomplete Chained Requests

Question

Hi,

I have a page with two input fields City and Venue. I have the autocomplete plugin from Devbridge working great for the city field. I now want to get it working on the venue field. The javascript I have so far is:

<script type="text/javascript">
    $(document).ready(function() {
        $('#Event_City').autocomplete({
          serviceUrl: '<%=Url.Action("GetCities", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { country: 'Yes' },
        });
        $('#Event_Venue').autocomplete({
          serviceUrl: '<%=Url.Action("GetVenues", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { city: $("#Event_City").val() },
        });
    });      
</script>

The second autocomplete passes an additional paramter (city) to the action on my controller. I will then use this to restrict my responses to venues in that city. This paramter is received but does not contain the current value entered in #Event_City. Instead it contains the default value.

Does anyone know how to evaluate the value when the autocomplete gets called?

I am just starting out with Javascript so please be gentle.

Thanks,

Answer 1

The reason it contains the default value is because the autocomplete is attached to the textbox when the page is loaded. In order for it to be updated with the new value, the plugin would need to provide a way for you to update properties of it's parameter object or allow you to destroy it on the second element and then rebuild it every time the user changes the first one's value. The AutoComplete library you chose looks pretty lightweight (not always a bad thing... just in your case it is...) and doesn't seem to support this functionality.

My best suggestion for you would be to try another library. I tend to like this one very much as it's quite versatile (demo page):

http://view.jquery.com/trunk/plugins/autocomplete/demo/

Answer 2

@Ian Mckay - In order to get the AutoComplete for the Venue to filter based on the City, you need to bind in the "change" event of the City as follows:

$(document).ready(function() {
    $('#Event_City').autocomplete({
      serviceUrl: '',
      minChars:2,
      width: 300,
      delimiter: /(,|;)\s*/,
      deferRequestBy: 150, //miliseconds
      params: { country: 'Yes' },
    }).change(function(){
     $('#Event_Venue').autocomplete({
       serviceUrl: '',
       minChars:2,
       width: 300,
       delimiter: /(,|;)\s*/,
       deferRequestBy: 150, //miliseconds
       params: { city: $("#Event_City").val() }
     });
    }); 
});