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]