Thoughts about Jquery autocomplete plugin

I'm sure you have experinence of building autocomplete functionality in some way. There many ways to do it -for example with  AJAX Control Toolkit. Since i'm teaching myself a jquery now i want to implement the jquery autocomplete plugin in my ASP.NET site.



Its looks easy as it appears in the exapmle :


After placing this javascript you only need to create input with id -"LOCATION" and the things start working.

So far so good.
The only problem for me with this code is that values coming from the Array(cities). I want values to come from the WebService. So i desided to build some small  site project to experience with plugin.
This is the WebService code:

As you can see there is no logic at all- web method returns the ";" deleimted Cities names in string.
Firstly i tryed to fill the values in separate ajax request-But its
Just Not Worked


Why?
Because the AJAX request that fills data in 'cities' Array is asyncronic. It means that when compiler reaches the '.autocomlete(cities' -the cities is still empty.

One way to work this around is to put the 'autocomplete' inside the 'success'  function of request:

This works fine [Download source]
But I'm not content with this solution because i want the 'suggested' values to be filled in response of user enter characters:
For this ,as i saw in plugin documentation i can put the WebService Url directly inside statement:



Here the things started to be messy. The problem is the break point in the code of webservice became not reacheable.

It taked me a long time to figure out what is the problem. I figured that after inside plugin code (jquery.autocomplete.js) in the 'request' funciton i put the error handler



inside '$.ajax' call. Yes, the ajax call of the plugin cannot reach the server unless you put following code inside web.config under 'system.web' node:



Now, after i can reach the server i started to get another error inside 'parse' function inside the plugin that tryes to split the data to rows with '\n' key.
As solution to this problem i decided to override the 'parse' function:

Now the things started to work. Now we see all cities in the list no matter wath user has
entered.
To repair this i had modifyed the WebService- GetCities method:

So now the method getting user input as parameter.
The only thing left is to modify the 'data' sended with the request inside the 'request' function of the plugin:

Now the thing is realy working:

[Download the source]