The auto-complete text box by Zichun is available at www.codeproject.com/Articles/8020/Auto-complete or on this site at www.philpearl.us/RIA/js/actb.js. It works by overlaying the auto-complete control on top of the specified text box, and linking the two together via the text box 'id', along with an array of items that are compared to what's typed into the text box.
Auto-complete textbox 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 a three events:
onmouseover
, onmouseout
, and onclick
.
Firstly, include the .js file into your script:
<script language="javascript" type="text/javascript"
src="actb.js"></script>
Next, create an array (in JavaScript) containing the keywords:
customarray = new Array('apple','pear','mango','pineapple',
'orange','banana','durian', 'jackfruit','etc');
Apply the widget to your using javascript:
actb(document.getElementById('textbox_id'),customarray);
And you're done!
This auto-complete edit control has some customizable features:
/* ---- Variables ---- */
this.actb_timeOut = -1; // Autocomplete Timeout in ms (-1: autocomplete never time out)
this.actb_lim = 4; // Number of elements autocomplete can show (-1: no limit)
this.actb_firstText = false; // should the auto complete be limited to the beginning of keyword?
this.actb_mouse = true; // Enable Mouse Support
this.actb_delimiter = new Array(' ',','); // Multiple autocomplete delimiter. Use empty array for 1 autocomplete
this.actb_startcheck = 1; // Show widget only after this number of characters is typed in.
/* ---- 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.
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