Welcome to DevAuthority.Com Sign in | Join | Help

A ScriptAculoUs autocomplete web control

This blog has moved to DotNetSlackers, please update your links and post comments there.

UPDATE: 05/07/06: Added a property - ScrollSize - which allows to show the results in a scrolled fashion.
UPDATE: 24/06/06: Fixed the bug affecting Firefox and published sources.
UPDATE: 27/06/06: Now it can be embedded into a UserControl and can retrieve the values from a UserControl method.

ScriptAculoUs is a top quality JavaScript library, useful for everything related to client-side web programming, like effects, DOM programming, events and so on.
Recently they included a new "control" in the package, which is able to extend a normal HTML input text into an autocomplete control. Does this reminds you of the ATLAS autocomplete extender? Read on...
The word "control" is not the same as the one ASP.NET programmers are used to hear, since it now refers to a client-side behavior, which happens completely on the client.
This autocomplete control, whom you can see examples here, is very rich in features but not very developer-friendly from an ASP.NET developer point of view, because almost everything has to be programmed in the markup code and manually, so I decided to create a custom control to wrap all those functionalities in a simple to use component called ScriptAculoUs.Net.

But why is this better than the other thousand autocomplete controls available out there?
Well, first let me make a brief list of the ones I like most:
  • ATLAS Autocomplete extender: very cool, but you need a webservice to retrieve results.
  • UPDATE 17/06/06: ATLAS Smart Autocompletion: a textbox built on top of ATLAS framework which incorporates the ATLAS autocomplete extender into a reusable web control, and enhances it by allowing to retrieve the suggestion list from a page method other than the classic web service method.
  • Wilco Bauer's SmartTextBox: very well written webcontrol, source code is a must-see, but lacks client-side support.
  • AspItalia TextBox Autocomplete: a must see too, can retrieve results from a DataSource control!

Ok, these are the coolest out there. My control can be better because:

  • ScriptAculoUs is a client-side library, has great support for visual effects and the result is better than all of them;
  • ScriptAculoUs is cross-browser, they mostly aren't;
  • ScriptAculoUs is a continuous work in progress, it will improve and I won't have to care about it unless they change the API.

To sum it up, this is better because ScriptAculoUs preserves me from caring about the client-side programming, which is the most part in an autocomplete pattern.

Features

  • No need for a web service or an external page to retrieve the suggestions, just a page method, which has to be public, return an object implementing the IEnumerable interface and accept a string as input parameter (the typed keys).
  • The support for effects, key navigation and anything else related to client-side behaviors is great thanks to ScriptAculoUs.
  • The results are cached on the client.
  • Can be easilly configured to show an animated image next to it just using a simple property. The image shows up when the control is retrieving the results from the server and hides when the operation is complete.
  • Can be extended to use a AutocompleteProgress control, also shipped, which can be placed anywhere on the page and customized using templates, which makes its content visible when the main control is retrieving results and makes them invisible when the callback is complete. For those using ATLAS, this is the same as the UpdateProgress control.
  • You can choose how many chars are needed to be typed before the control performs a callback to the server. The default value is 1.
  • The list of results appearance can be customized using some style properties called Suggestionxxx and SelectedSuggestionxxx. Easy to use.

I welcome any feedback and suggestion to improve it. A screencast about how to set it up is available too. Please watch it at double speed since it was recorded on a slow virtual machine, otherwise you risk to fall asleep :-)

Download

Binaries: ScriptAculoUs.Net.bin.zip

Sources: ScriptAculoUs.Net.src.zip

Screencast: ScriptAculoUs.Net Demo.wmv

Published Sunday, May 14, 2006 1:53 PM by SimoneB
Filed Under: ,

Comments

# re: A ScriptAculoUs autocomplete web control

Hi,

we cannot get your AutoCompleteBox to work in our DotNetNuke envirnoment. The problem seems to be, that DotNetNuke always loads its default.aspx, those contain our own Web-User-Controls. These Controls have another type and are located in another Assembly.

Because your AutoCompleteBox wants to find the "MethodName" in the Page´s Assembly, it is never found.

Suggestion: A Attribute in the TextBox to give the Assembly Name (or Namespace?) of the Assemby holding the Suggest-Methods.

regards, Philipp
Tuesday, May 23, 2006 5:17 AM by Philipp Holzmann

# re: A ScriptAculoUs autocomplete web control

Thanks for pointing that out, I'll maybe try to find a way to correct this.
Wednesday, May 24, 2006 6:48 AM by SimoneB

# re: A ScriptAculoUs autocomplete web control

Any chance you might look at supporting other scriptaculous functionality like Ajax.InPlaceEditor?
Friday, May 26, 2006 6:11 AM by Jurgen

# re: A ScriptAculoUs autocomplete web control

Hi Jurgen, I didn't know about the InPlaceEditor, I might consider creating a wrapper for that too, but to be honest I don't find it very useful.
If you give me some examples where it can be used i'd be glad to develop it too.
Friday, May 26, 2006 6:54 AM by SimoneB

# re: InPlaceEditor

To be honest with you I'm torn between using Scriptaculous, Script# and your approach. I am in the process of building a fairly major web application which will embrace the Web 2.0 paradigm fully - taking advantage of inline editing of content, using visual cues and effects such as those built into Scriptaculous, and your BusyBox. I love the simplicity of Script#, and I have taken the example provided and put it into a  server control, and I also love the visual features Scriptaculous. What I'd like is a way to integrate them both. You have the only solution I've found where power of .NET is combined with the fabulous client-side library of Scriptaculous. The inline editing examples provided show how the visual effects are combined with the practical, the control higlights to indicate it can be edited, and then fades back to the background colour on the blur event. A spinning indicator is there also to indicate server activity. I'd love it if you would consider putting this functionality into your component. You can contact me offline if you like: jocubeit-at-gmail-dot-com.
Friday, May 26, 2006 9:36 PM by Jurgen

# re: InPlaceEditor

Some places it can be used:
- CMS content editing without leaving the context of the page.
- Ecommerce, editing product descriptions, pricing etc.
- Editing blog entries or static content in web sites.
- Shared document editing - making revisions to existing content.
- Integrated live spell check and grammar checking.

Anywhere an asynchronous call to the server is required without reloading the page. I find this to be a compelling reason to choose one content management system over another.
Friday, May 26, 2006 9:48 PM by Jurgen

# re: A ScriptAculoUs autocomplete web control

I must agree that Scriptaculous is maybe the best javascript library out there, along with the YUI from YAHOO.

The problem is that for lazy ASP.NET developers like me it's more appealing to have a drag n' drop control ready to use instead of taking care of the client side aspect.

That said, I think the most interesting solution by now for ASP.NET is ATLAS, along with its Control Toolkit, which is very easy to plug in ASP.NET apps and works nicely, even if the guys at Microsoft are maybe not as good Javascript developers as the ones working at Scriptaculous and YUI. Anyway ATLAS is just in the beginning, and with the new collaborative developement strategy started at CodePlex is maybe going to improve very much.

Thanks for the ideas about in-place editing, I will consider it for a future control library, but I can't promise I will be able to write it soon.
Saturday, May 27, 2006 3:40 AM by SimoneB

# Autocompletion ASP.NET Control

There are many auto-complete/auto-suggest web controls around, and when I needed AJAX functionality to...
Wednesday, June 07, 2006 11:40 PM by Thomas Williams

# re: A ScriptAculoUs autocomplete web control

Simone - thanks for sharing this work, it's awesome. I have semi sucessfully implemented it, and was hoping you could point me in the right direction to finish. I'm trying to AutoComplete off of a field in a SQL DB. I'm using a SQLDataReader to loop through the table. The problem is that all the records are together in one long string when the auto complete kicks in. Any suggestions?

(I'm doing this in VB)
Friday, June 16, 2006 10:36 PM by Alex

# re: A ScriptAculoUs autocomplete web control

Hi Alex, I dont work with VB but I guess you could declare an ArrayList and looping through your reader add the table field values to the ArrayList. Then just return it to the control. Got it?
Friday, June 16, 2006 11:06 PM by SimoneB

# re: A ScriptAculoUs autocomplete web control

It's a very nice control and easy to implement/use. But I have some problems using the control with the current ATLAS Framework (I have a Updatepanel around all my controls on the page), but I am getting some javascript script errors in the javascript framework WebResource.axd, I wonder why ?
Friday, June 23, 2006 2:20 AM by Thomas nystrøm

# re: A ScriptAculoUs autocomplete web control

I think that ScriptAculoUs is not known to be working with ATLAS. Give a look at this post: http://smarx.com/posts/atlasculous-atlas-and-scriptaculous-working-together.aspx
Friday, June 23, 2006 3:54 AM by SimoneB

# re: A ScriptAculoUs autocomplete web control

Thanks for fixing the Mozilla issue so fast.

Regards
Monday, June 26, 2006 3:24 AM by neil young

# re: A ScriptAculoUs autocomplete web control

You're welcome, it was something trivial.
Monday, June 26, 2006 3:39 AM by SimoneB

# re: A ScriptAculoUs autocomplete web control

Is there an easy fix to using THIS control within a webuser control? It never finds the "Method" to run.

I tried prefixing the method with the <%=this.ClientID%> but that didnt seem to help matters at all.
Tuesday, June 27, 2006 6:38 AM by Ronald Frown

# re: A ScriptAculoUs autocomplete web control

Ok Ronald, I've fixed it. Now it searches for the method in the direct parent of the control. If it is a HtmlForm or a ContentPlaceHolder (inside a MasterPage) it searches for the method in the Page code, otherwise it usually means that the control is contained into a user control so the method is looked up in the user control code.
I've uploaded the updated code.
Tuesday, June 27, 2006 5:19 PM by SimoneB

# re: A ScriptAculoUs autocomplete web control

Hi Simone,

Thanks for the great wrapper. I got everything to work, but I'm having trouble with getting the data from SQL over to the public function. Can you return a SQLDataReader?  If not, can you give an example?

Thanks!
Wednesday, June 28, 2006 12:48 AM by Tom

# re: A ScriptAculoUs autocomplete web control

Hi Tom. As documented, you'll have to return an object implementing the IEnumerable interface, so that the control can iterate through its items. The data reader is something different, but adding its results to an enumerable type is as easy as writing something like this:

ArrayList suggestions = new ArrayList();

while(reader.Read())
   suggestions.Add(reader[0]);

The ArrayList is a valid object to be used as a suggestion list.

Wednesday, June 28, 2006 3:46 AM by SimoneB

# re: A ScriptAculoUs autocomplete web control

Nice control!

How can I add a scroll to the suggest list?
Wednesday, June 28, 2006 3:54 AM by Oleg Tkachenko

# re: A ScriptAculoUs autocomplete web control

Oleg, mine is just a wrapper around the Javascript code written by the folks at Scriptaculous. You'll have to ask them, but I think there's no easy way to accomplish what you are asking for.
Wednesday, June 28, 2006 4:08 AM by SimoneB

# re: A ScriptAculoUs autocomplete web control

Thanks! I used the ArrayList and got it to work. That was the part I was missing.

Wednesday, June 28, 2006 10:58 AM by Tom

# re: A ScriptAculoUs autocomplete web control

Here is my solution to a scrolled suggest list just in case somebody needs it:

1. Suggestion.cs:
add a class to the UL tag:
StringBuilder returnValue = new StringBuilder("<ul class=\"autocomplete\">");

2. in a stylesheet constrain suggest list height and enable scrolling:

UL.autocomplete
{
   height: 10em;
   overflow:auto;
}

3. In the controls.js, add this code to the "render" function:
for (var i = 0; i < this.entryCount; i++) {
       this.index==i ?
         Element.addClassName(this.getEntry(i),"selected") :
         Element.removeClassName(this.getEntry(i),"selected");        
+++        if (this.index == i) {
+++          var element = this.getEntry(i);
+++          element.scrollIntoView(false);
+++        }
     }

Works fine in IE, but I didn't tested FF. afaik FF supports scrollIntoView function so it should work too.

Thanks for the control and sources, Simone!
Wednesday, July 05, 2006 2:10 AM by Oleg Tkachenko

# re: A ScriptAculoUs autocomplete web control

Thank you very much indeed Oleg, very good work. I'm surely gonna include the new feature into the control.
Wednesday, July 05, 2006 3:19 AM by SimoneB

# re: A small extend

Very good script

a little bug for scroll in ie6 and ie7 (if i have enough time i will coorect it...)

Another bug corrected :
If you want to use it inside special aspnet tag server change (like panel or multiview...):

in AutocompleteTextBox.cs :
protected override void CreateChildControls()

...
if (this.Parent is HtmlForm || this.Parent is ContentPlaceHolder || this.Parent is MultiView || this.Parent is View || this.Parent is  FormView || this.Parent is  Panel)

parent = Page;

else

...

         
Monday, July 10, 2006 7:33 AM by jlg

# re: A ScriptAculoUs autocomplete web control

Hi jlg, I already corrected that bug, please take a look at my new blog where I updated the post and the code. The link is at the top of each of the posts.
Monday, July 10, 2006 9:08 AM by SimoneB

# re: A ScriptAculoUs autocomplete web control

   Very nice control!

   However, I'm failing to get what I wanted in the first place, an AutoComplete TextBox that could use the page state for the suggestions, like the value of a specific DropDownList.
   Any ideias how I do that? What I have is a ddl of states and a tb of cities, and I need to filter the suggestions by the value of the state ddl (that wat, only the cities in that state appear as a suggestion)!
   Thank's for any kind of help!

Leandro Fernandez
Wednesday, July 12, 2006 9:03 AM by Leandro Fernandez

# re: A ScriptAculoUs autocomplete web control

Hi Leandro, I'm sorry but the control doesn't support it. If you need to get suggestions based on the state of other page controls you'll need to rely on another implementation. Unluckily the original ScriptAculoUs Javascript control cannot implement this, since behind the scenes it just performs a new request to the server, and what I added is just the creation of a new instance of the page using reflection, thus the state of the page cannot be retrieved. My advice is to use Atlas.
Wednesday, July 12, 2006 3:47 PM by SimoneB
New Comments to this post are disabled