Question

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

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