Thread: Javascript AutoComplete using ASP.NET webservice to populate

I've been working on my own Javascript AutoComplete function to populate a list of possible entries when a user starts typing in a textbox. I have used an ASP.NET webservice to return my list, but feasibly you could use this in any type of webpage. The only important element as far as the developer is concerned is how you get the XML formatted document into the autoComplete rendering function

Although the Ajax Control Toolkit provides an AutoComplete extender, I wanted to do a little more when the user selected an item and so went about designing my own.

I have attached a sample of the code used. This contains:-
ac.js - contains the Javascript codes for the AutoComplete
master.js - contains some Javascript functions that could be reused in other areas
Default.aspx - our content page (and relevant code behind)
mymaster.master - our master page (and relevant code behind)
style.css - just contains the styles for the autocomplete objects
/Services/ - contains a web service reference
/App_Code/ - contains the code behind for our web service
blank.html - just a blank html page used as the src of the IFRAME required to block the othe form elements in some browsers.

I have tested this and found it compatible with IE6, IE7, Firefox 3, Opera 9 and Google Chrome.

The important elements are the normal div holder that is placed with the textbox object. This is the object used by Firefox (and I think Chrome)

The div IE and Frame IE objects are the holders used by IE and Opera. The important bit is that they must be placed at the end of all your HTML code. You'll see I have placed them directly above the end </form> tag in the master page. Obviously if you don't have master pages, you can just place them as the last element on your content page. They must be placed here otherwise the positioning using Left and Top does not work and they will not be placed underneath the control textbox.

If you have any queries on the code or spot any bugs, please post back and I'll do my utmost to help or rectify the problem.

Hope that helps someone else looking for similar code.

<edit>There was a problem when using the onblur event. If you clicked an item in the autocomplete list, the onblur was hiding the list before the item clicked was registered.

I have changed this by removing the onblur event from the textbox and adding an onclick event to a div that covers all or the majority of the page to fire the same blur function.

I have made the necessary changes to the default.aspx and default.aspx.vb files

I also added a section to catch a Tab button being pressed in the KeyCatch function that will hide the autocomplete list.
</edit>

Found one slight bug with the script. Have made amendments to the post above and uploaded an amended zip file containing the changed code.