| home / programming / javascript / gr / column5 / 1 |   [next] |
|
|
|
Many readers are probably familiar with the Auto-Complete feature of Internet Explorer (see Fig.1 below). For each text box with a specified name, the browser maintains a list of values that the user has entered. As the user types in a new value, it pops up the list to save the user from having to type it all in.
Fig. 1: Auto-Complete functionality in Internet Explorer.
This feature is useful in many contexts but there are some limitations:
Each list is associated with a text-box name, not a web site or page. As a consequence, the list is shared with other text boxes of the same name out on the web.
It is not available in other browsers.
In this article I’ve presented a JavaScript answer to these problems. It allows the web site designer to determine in advance which Auto-Complete words to offer the user; it is specific to a single text-box and is cross-browser compatible (see Fig. 2).
Fig. 2: The JavaScript Auto-Complete solution.
The Auto-Complete functionality is handled in a class called AutoComplete…
function AutoComplete(aStr, oText, oDiv, nMaxSize)
{
// initialize member variables
this.oText = oText; // the text box
this.oDiv = oDiv; // a hidden <div>
for the popup auto-complete
this.nMaxSize = nMaxSize;
// preprocess the texts for fast access
this.db = new AutoCompleteDB();
var i, n = aStr.length;
for ( i = 0; i < n; i++ )
{
this.db.add(aStr[i]);
}
// attach handlers to the text-box
oText.AutoComplete = this;
oText.onkeyup = AutoComplete.prototype.onTextChange;
oText.onblur = AutoComplete.prototype.onTextBlur;
}
The first argument to the AutoComplete constructor is an array of strings that defines the AutoComplete list. This list is fed into a tree structure managed by another class called AutoCompleteDB (more on this later). The other arguments are: the text-box object, a DIV object for displaying the Auto-Complete popup and the maximum amount of Auto-Complete options to offer at any one time.
The AutoComplete code needs to attach a couple of handlers to the text-box; an onkeyup handler reacts each time the user types a character into the text-box and gives the opportunity to offer suggestions. The onblur handler gives the chance to hide any popup that might be visible when the focus leaves the text-box. The implementation of these handlers is shown here…
AutoComplete.prototype.onTextBlur = function()
{
this.AutoComplete.onblur();
}
AutoComplete.prototype.onblur = function()
{
this.oDiv.style.visibility = "hidden";
}
AutoComplete.prototype.onTextChange = function()
{
this.AutoComplete.onchange();
}
AutoComplete.prototype.onchange = function()
{
var txt = this.oText.value;
// count the number of strings that match the text-box value.
var nCount = this.db.getCount(txt);
// if a suitable number then show the popup-div
if ( (this.nMaxSize == -1 ) || ((nCount < this.nMaxSize) &&
(nCount > 0)) )
{
// clear the popup div.
while ( this.oDiv.hasChildNodes() )
this.oDiv.removeChild(this.oDiv.firstChild);
// get all the matching strings from the
AutoCompleteDB
var aStr = new Array();
this.db.getStrings(txt, "", aStr);
// add each string to the popup-div
var i, n = aStr.length;
for ( i = 0; i < n; i++ )
{
var oDiv = document.createElement('div');
this.oDiv.appendChild(oDiv);
oDiv.innerHTML =
aStr[i];
oDiv.onmousedown
= AutoComplete.prototype.onDivMouseDown;
oDiv.onmouseover
= AutoComplete.prototype.onDivMouseOver;
oDiv.onmouseout
= AutoComplete.prototype.onDivMouseOut;
oDiv.AutoComplete
= this;
}
this.oDiv.style.visibility
= "visible";
}
else // hide the popup-div
{
this.oDiv.innerHTML
= "";
this.oDiv.style.visibility
= "hidden";
}
}
| home / programming / javascript / gr / column5 / 1 | [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Webcast: Connecting PHP to Microsoft Technologies Video: Windows Azure Debugging Tips |
MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: March 27, 2003
Revised: April 6, 2004
URL: http://webreference.com/programming/javascript/gr/column5/1
