Archive

Posts Tagged ‘AJAX’

Google-like Suggest Textbox

June 18, 2010 Leave a comment

We all love the Google search real-time suggestions. 

It is possible to implement a similar feature in your own web development using the asp.net ajax toolkit. 

Inside the toolkit you will find the AutoCompleteExtender.  Below I will detail how to get this difficult extender working.  

Don’t bother looking at the documentation on www.asp.net, it is more or less worthless.

First, associate the autocompleteextender with your text box.

As you can see, you must specify a ServiceMethod and a ServicePath.  This is where it gets tricky.  

You must create a web service (I used an asmx file) which strictly adheres to calls from the autocompleteextender. 

The service will look like the following:

This should get the service up and running.  Notice the query itself must strictly adhere to the number of records you want it to return.  You can also play a few formatting tricks via CSS.  Mine looks as follows:

The final product looks as follows:

Some tinkering needs to take place to make the textbox size equal to the div size of the autocomplete box. This can be done in the css for the text box, making sure there are not extraneous borders or margins.