Introduction

Most auto-complete textboxes may have a reverse effect on end-users. Instead of helping them get things done faster, they get irritated by design flaws made by the programmer. (Admittedly, I've made such design flaws too.)

I got to learn this lesson when designing my first auto-complete edit control, found here[^]. Although it seemingly looks intuitive, I forgot to consider the fact that what if the end-user wanted to type just 'ap' but the 'ple' appears out of nowhere? This means that the end-user would then have to hunt for, and press the delete key.

After seeing how GMail made its auto-complete, I took the idea and implemented my own version of the auto-complete control.

How does it work?

The important event that will fire whenever the user press any key is onkeydown. The onkeydown event handles all the normal character input and is in charge of creating the auto-complete list. It also handles keys like 'up', 'down' and 'enter'.

Using the JavaScript regexp() object, the script will run through the array containing the keywords and match them one by one. After which, a DIV will be created dynamically using document.createElement(). Finally, when the user presses the 'Enter' key, the DIV will be detached and the input box updated.

The user can also select the options using the mouse. This is done through three events: onmouseover,onmouseout
, and onclick.

The styles are pretty self-explanatory; tweak the values for best results for your own website. Firstly, the variable actb_timeOut controls how long the auto-complete list's timeout should be (i.e., after x ms, the list will disappear). By default, it is set to -1, which represents no timeout.

Next, the variable actb_lim limits the number of elements the list will show, to prevent over-spamming. If you do not want to set any limit, set it to -1.

Thirdly, the actb_firstText variable determines whether the match with the keywords-array should only start from the first character or if the match can be any arbitrary match within the keyword. For example, if firstText is set to true, then a given string "ello" will match with "hello".

Also, the actb_mouse variable determines whether the control should respond to mouse events. Mouse support works when user clicks on the auto-complete list that appears.

The actb_delimiter variable allows for the much requested multiple auto-complete feature. Set a custom delimiter, or even multiple delimiters like semi-colon (;) or comma (,), and the engine will complete words separated by the given delimiter.

Lastly, actb_startcheck controls the number of characters that must be typed in before the textbox will display the control. Thanks to flyasfly for this suggestion.

Implementations

As of version 1.3, all of the above mentioned are public variables. This can be useful in emulating controls like Google Suggest. When you apply the control to your textbox using the actb function, it returns an object.

Changing the autocomplete list

obj = actb(document.getElementById('textbox_id'),customarray);
// ... after some time ...
obj.actb_keyword = new Array('this','is','a','new','set','of','keywords');

Todo

Many other features suggested by CPians, some of which might be beyond me at the moment but I'll still try my best!

Tested browsers

Internet Explorer 6.0.28

Mozilla Firefox version 1.0.3

Finally...

Thank you to all of you who have supported, modified, and offered your suggestions to the control! I'm extremely apologetic for the inactiveness of this project because of schoolwork etc. However, I still try my best to work on it whenever anyone has a new feature request!

Added: This control now supports phrases with spaces in between. Thanks to Miguel Vieira.

Added: This control has mouse support. Thanks to Alecacct and everyone for the idea.

18 Aug 2004

Basic engine created.

Article posted!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

I downloaded your Auto-complete code sample from "http://www.codeproject.com/script/Articles/ArticleVersion.aspx?aid=8020&av=41368" to implement an on-line translator. I would like to know how to implement auto-complete control with external js file?

Changing the color hides the dropdown highlighting, but what I am seeking is something different.

If my list was populated with "Item1", "Item2", "Item3", and I type in "Item" then press [Enter], the script Automatically auto-completes the text in the textbox to become "Item1", as "Item1" gets highlighted BY Default (AS it is the first entry in the list).

I would like to perform a search for "Item". So I would like to type in "Item" then [Enter], without automatically selecting the first highlighted item in the list, in this case "Item1" gets selected and the action is performed.

Pretty much, how can I Modify the script SUCH that NO items are selected by default. I think this would solve my issue.

hello, I have been using this great code for a while now. Recently however, I stumbled into one little problem related to this autocomplete control. Up until now, the control only allow more than one keywords for search if the words are typed consecutively. for example if we type "apple bee" the result will only show "apple bee cat", "apple bee dog", etc.is there any possible way to let the control also show "apple frog bee".thanks for any help

When I try to filter I am getting the following error:n.search is not a function actb_parse()actb.js (line 127) actb_generate()actb.js (line 203) actb_tocomplete()actb.js (line 537) (?)()actb.js (line 455)[Break on this error] var p = n.search(re);

Based on what I see it looks like the slashes in the URLs are tripping up the RegEx() calls. Is there something simple I can do to use this list without changing the core JS code? Like escape the slashes or something?

Its not working on my firefox 3.x . Dont even give any js error , works fine in IE. When I type in the search box nothing happens. I guess is the key event not firing? Any help will be greatly appreciated. Implemented as follows:

this is one great neat code from u zichun!If you, or anyone else who read this dont mind, I'm kinda wondering if there is a way to show the array content to different textfield (with different id of course) once we press the enter button to input our choice.

Thanks for this article as it worked perfectly in my application..I am using this script in my asp.net(C#) application.I am passing textbox values from my aspx.cs page using function.But when the length of the string values exceeds 700 script is not working..Plz help me..