JQuery AutoComplete Queries

Question

I have a page with two input fields City and Place. I have a Devbridge autocomplete plugin that works fine for the city field. Now I want him to work on the venue. Javascript that I have so far:

<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 parameter (city) to the action on my controller. Then I will use this to limit my answers to places in this city. This parameter is received, but does not contain the current value entered in #Event_City. Instead, it contains a default value.

Does anyone know how to evaluate value when calling autocomplete?

I am just starting out with Javascript, so please be careful.

Thanks,

Answer 1

@Ian Mckay - In order to receive auto-completion for a Venue for filtering based on a city, you need to link the City in the “change” event 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() } }); }); }); 

Answer 2

The reason it contains the default value is because autocomplete attaches to the text field when the page loads. In order for it to update with a new value, the plug-in should provide you with a way to update the properties of this parameter object or allow you to destroy it on the second element, and then rebuild it every time the user changes the first one value. The autocomplete library you have chosen looks pretty easy (not always bad ... just in your case it is ...) and does not seem to support this functionality.

My best suggestion for you is to try a different library. I really like this one, very versatile (demo page):

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