<< More Autocomplete stuff on the way... | Satoko Shinashi Fight Video >>

Posted by Wayne at 2006-04-21 10:16

Finally.. after many modifications, the AJAX AutoComplete for ASP.NET 2.0 web user control is available for download. This web control contains a text box. As you type in the box, suggestions fill in a drop down, very similar to Google Suggest.

There are many configuration options, so if you are looking for a quick fix, you shouldn't have to get your hands too dirty. On the other hand if you're looking for a base to build on, all of the C# and javascript code is included - hack away to your heart's content. If you make something cool, leave a comment and let me know about it.

The styling for all of the components is done with CSS contained in an external file. All you need to do is set the control's properties to the class names for each element. There are other display options, optional features like AutoPostBack, case-sensitivity, server-side caching and other search options as well. For more information on what you can do, read the documentation.

Or if you're one of those people who are more of a hands-on learner, you can play with the demo which is also included in the .zip file.

Download the Visual Studio 2005 Solution .zip file (18k)

I designed this control to be very easy to use, however it does assume you have a working knowledge of ASP.NET. I will do my best to answer any questions, but the software is offered with no guarantees.

If you liked this post, please be sure to subscribe to my RSS Feed.

martial arts

Categories: Web Programming | AJAX | ASP.NET

AJAX Autocomplete in ASP.NETCreating a Required Input Server Control in ASP.NET 2.0Explains how to create a server control containing a TextBox, Label, and RequiredFieldValidator. In...More Autocomplete stuff on the way...

Comments

May 5. 2006 17:09

Not currently, though that's a cool idea for a feature. If you wanted to take a stab at implementing it yourself, you could search the text box for the last index of the delimiter character and then pass everything after that to the lookup function.

Wayne Hunt

November 23. 2006 05:21

Hi,

When i have just one autocompletesearch user control in my page, everything goes fine. But when i add two of them, i faced some problem. I will explain them in detail.

Consider I have two autocompletesearch user control in my page. I set the DataTextColumn of the first usercontrol as Id, and the second as Name. When I enter a value in the first textbox, the second one's div was being populated and that too with the second one's data(i.e Names were populated instead of Ids.). By passing the corresponding textbox id and div id to the getautocomplete and fillautocomplete method, i succeeded in showing the correct div. So now when i enter something in the first textbox, the div for the first textbox pops up correctly. But it is still populating with the Names instead of Id.

When I traced the program flow, i found first the pageload of the first control instance is being called, then the pageload of the second control instance is being called. Then the RaiseCallBack method is called but at the time of calling the raisecallbackmethod, it is having the second control's instance and that is y the names are populated for the Id Textbox instead of the names.

How do i solve this issue? Any help will be greatly appreciated.

Regards,
Maya

Regards,
Maya

Maya

June 14. 2007 16:08

Wayne,

First of all, thanks for posting such awesome code. I tweaked it and it works like a charm...however, my application requires to show text and pick up the corresponding value which is stored in the xsd (I used an xsd instead of xml to read the options). Now I saw that in your code you mentioned, referring to backend values that the code doesnt support them for now (Exact code line- //this.ctlAutoCompleteSearch.DataValueColumn = "ab"; - NOT CURRENTLY SUPPORTED)

Could you pass me some pointers how would I get this working with the backend values please?

Once again, thank you so much for teaching how this awesome thing works!
God Bless!
Ben

Ben

July 6. 2007 13:35

When I open the page with the control on it I get the following error:

The target 'AutoCompleteSearch1' for the callback could not be found or did not implement ICallbackEventHandler

For what I noticed is that the page couldn't find the linked .js. Any suggestions?

Elarrat

July 6. 2007 13:37

Sorry, I forgot to point the line error, it's

objCallbackScriptBlock = Page.ClientScript.GetCallbackEventReference(this, "strQuery", "fillAutoComplete", string.Empty, "onError", true);

Elarrat

July 9. 2007 08:25

Elarrat,

Make sure that the control is named AutoCompleteSearch1? It seems the error is having problems locating that control. I'd also suggest checking out the ASP.NET AJAX framework and the Autocomplete extender in the AJAX Control Tool kit on <a href="http://ajax.asp.net">http://ajax.asp.net</a>.

I built this control because that didn't exist at the time, but even for my own projects, I've switched to using that rather than my own custom one.

Wayne

Wayne

July 9. 2007 08:26

Elarrat, Make sure that the control is named AutoCompleteSearch1? It seems the error is having problems locating that control. I'd also suggest checking out the ASP.NET AJAX framework and the Autocomplete extender in the AJAX Control Tool kit on http://ajax.asp.net. I built this control because that didn't exist at the time, but even for my own projects, I've switched to using that rather than my own custom one. Wayne

Wayne

August 13. 2007 08:24

The problem was the ICallbackEventHandler, somehow I removed from the class and it was causing the error. Thanks a lot for your help.

Elarrat

October 11. 2007 13:48

why not just download predictad? it's an ajax autocomplete application that displays contextual advertisements. so not only do you get autocomplete, but you make your site money too! ain't the internet great ; )

www.predictad.com

tomer molovinsky

July 16. 2008 00:21

Hello Sir,

I integratec this in my project.

I want additional functionality :
when i press up or down key
It should focus On result and sho the selected result highlighted

Thanks

tatyaso