I’ve been playing around with hooking up the JQuery AutoComplete widget with an ASP.NET Web Service. This is a really neat idea that adds a lot of whizzbang to a standard Web-based form. In theory one could also use ASP.NET UpdatePanel controls with traditional ASP.NET/HTML form controls, but I really wanted to look further into the JQuery Ajax functionality since this fits together very neatly with the JQuery AutoComplete widget.

I found three really good articles on the topic that I am listing below:

1. Mudassar Khan’s ASP Snippets Blog article - Implement jQuery Autocomplete using Web Service in ASP.Net
2. Andy Marshall’s article on CodeProject - Introduction to using jQuery with Web Services
3. Luca Congiu’s article on MSDN - Use Jquery Autocomplete With Web Service (ASMX) DataSource

From reading the articles I have been able to adapt the information these authors presented into the logic I am looking for.

The Desired Functionality

Specifically what I am looking to do is to have a Web form with a text entry area that will offer a user suggestions for text while a user is  typing. The options should be selectable and should pass an id value.

Furthermore, the suggestion list will kick in after the user has entered a minimum of two characters and will match anywhere within the database name field text for matches to show. To reduce lag and the amount of data being transmitted I am capping the returned results to a maximum of 500. Furthermore I am using the JSON protocol to keep the transferred data lightweight.

(more…)