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.
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.
This auto-complete edit control has some customizable features:
/* ---- Variables ---- */// Autocomplete Timeout in ms (-1: autocomplete never time out)
this.actb_timeOut = -1;
// Number of elements autocomplete can show (-1: no limit)
this.actb_lim = 4;
// should the auto complete be limited to the beginning of keyword?
this.actb_firstText = false;
// Enable Mouse Support
this.actb_mouse = true;
// Delimiter for multiple autocomplete.
// Set it to empty array for single autocomplete
this.actb_delimiter = new Array(' ',',');
// Show widget only after this number of characters is typed in.
this.actb_startcheck = 1;
/* ---- Variables ---- *//* --- Styles --- */this.actb_bgColor = '#888888';
this.actb_textColor = '#FFFFFF';
this.actb_hColor = '#000000';
this.actb_fFamily = 'Verdana';
this.actb_fSize = '11px';
this.actb_hStyle = 'text-decoration:underline;font-weight="bold"';
/* --- Styles --- */this.actb_keywords = new Array();
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');
Multiple auto-complete textboxes
obj = new actb(document.getElementById('textbox_id'),customarray);
obj2 = new actb(document.getElementById('textbox2_id'),customarray2);
Multiple textboxes (different options)
obj = new actb(document.getElementById('textbox_id'),customarray);
obj.actb_mouse = false; // no mouse support
obj2 = new actb(document.getElementById('textbox2_id'),customarray2);
obj2.actb_startcheck = 2; // start actb only after 2nd character
Todo
Add second array (customarrayDesc) for display description in the list (ex => [an apple: it's an apple] instead of [an apple]. Suggestion by angelo77).
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!
Fix: Fixed a bug with actb_bgColor styles due to typo.
Fix: Now caret does not move away (Firefox) when user presses Enter or tab.
1.3: 8 May 2005
Added: actb_startcheck has the number of characters that start the widget control. Thanks to flyasfly for suggestion.
Change: All 'tweakabilities' and styles have been changed to public variables.
Fix: Fixed an IE-specific bug which prevents the caret position of textarea to be retrieved. Now widget works for textarea too.
1.2: 9 Apr 2005
Change: Converted the code of actb widget to OOP.
Fix: Mouse click bug that disallows autocomplete control from deleting itself.
Added: the keywords array (actb_keyword) becomes a public variable, so it can be modified from the parent script.
1.1: 6 Dec 2004
Fix: Metacharacters escaped before parsing with RegExp.
Added: Multiple delimiters.
Added: Tab now completes the text like Enter.
Change: Now, only an event is needed for the control to work; the rest are attached dynamically.
Fix: Bugs with caret position in Firefox: originally, 'up' and 'down' keys changed caret position in the textbox for Firefox. This problem has been rectified.
1.0: 23 Nov 2004
Fix: some miscellaneous bugs in mouse support (actb_removedisp() cannot be executed properly).
Fix: actb_timeout now works fine with mouse support on.
Added: When user moves the mouse over each individual option, the option will be highlighted.
Added: Multiple auto-complete! This works even if you're editing previous "fields".
0.9: 6 Oct 2004
Fix: A bug concerning clientHeight which apparently Mozilla does not support. Thanks Cameron Smith for pointing out.
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.
mouse click stops working when ajax used to update list Member 4523987
2:29 23 Sep '09
Hi,
I am using ajax to update the list used by actb. When listToShow is populated for the first time, everything works fine. However, when I get a new listToShow from the database using ajax, and send it to setupFullSiteList again, the mouse click for autocomplete stops working.
Any idea why ?
function setupFullSiteList(listToShow){ var myActb = new actb(document.getElementById("location"), listToShow, true, 1, "location"); }
hi zi chun, im a coder in html and php and we re starting a website for a comparison of companys... i dont know if we earn money with that site or not but i prefer to ask u in the way: can i use that script u wrote on a commercial website? (because is licened under cc).. or what du u want? pls give me an answer cause i need it in the next coming days...
Anyone have any ideas on how to set the width for the dropdown to be fixed to my selection box? Also, I'd like to add a border to the dropdown list box, rather than color it. I'm relatively new to JavaScript and while I can do this on a normal div, I'm not there yet if I need to do it via script.
Dear Chun, I can use your actb in html. But I cannot use it in ASP.Net 2.0. The browser complains "object is needed".How can I use your function in ASP.Net 2.0. Thanks.
I have to agree with r3kb. The function works very well and the download is nicely self-contained but the code is very difficult to read. May I suggest the following:
- more documentation in the code, the purpose of each function at the very least, - friendly variable names, - use of line spacing where appropriate to help with ease of reading and - be kind to your fellow developers by avoiding inlines like this: "if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function(){actb_mouse_on_list = 0;actb_removedisp();},actb_self.actb_timeOut);"
Thanks for publishing your code!
- Alwyn
P/S: You might want to put your details in the Javascript files so we can give you proper credit.
I like the control quite a bit, but I find that the code it's based on is difficult to read. I would hope that a choice would be made to change to code that self-documents more. Over time, I've learned that commenting every line of code is more distracting than helpful. Code that self-documents uses variable and method names that describe what each is used for. IMNSHO, comments are best used to describe intent, nuances, and challenges. Single letter variables are okay for counters in loops, but it's easier to see what the counter is used for if it's descriptive...
Thanks for the tool and the article. I find it useful already, but I can see that in order to incorporate it into what I'm doing, I'll need to make some changes to it.
Hi , Here the requirement is when i type a letter "A" then it will retrive a set of values from database.Then i should use this auto complete instead getting all the values in an array and showing .Could please reply at earliest.
In php, I did it like following, and it's working perfect (although I have a problem with positioning in my thickbox...):
1) retrieve all values from the database and put them in a string (indeed, not a php-array!) $rs=mysql_query("select name from table"); $aantal=mysql_num_rows($rs); $i=1; while(list($name)=mysql_fetch_row($rs)) { if($i<$aantal) $array_names.="'$name',"; //if it's the last item from the series, don't put a comma after the value else $array_names.="'$name'"; $i++; }
2. Put the following at the place where you want to show the values (the php-string will just be echoed in the javascript): <script> var customarray = new Array(<<??php echo $array_names; ??>>; var obj = actb(document.getElementById('names'), customarray); </script>
And you're done! I suppose that the approach will be similar in other languages like ASP.
Good luck!
P.S. It seems that this site is blocking the php-tags , so for that reason you have to change the line with 'var customarray' etc. in step 2...
I got one question, is this tested on newer browser such as Google Chrome or Safari or it's just IE and Firefox? I tried it on Chrome and it doesn't work. Am I doing something wrong or it's not supported?
Hi, I use actb for populating names and the names coming is a dynamic list prepared by ajax. Once the names are populated the actb works fine but as soon as the dynamic list is changed the mouse events stops working.. Please help.....
