AutoComplete Widget :: JS Array Example

DataSource

Two DataSource instances point to in-memory JavaScript arrays. The first array holds the 50 US states. The second array itself holds arrays of US area codes and their corresponding states.

AutoComplete

Since the two DataSources for this example are already loaded into memory via JavaScript arrays, queries should be very fast to return data. Therefore, both AutoComplete instances are configured to have a query delay of zero seconds.A few configurations have also been made to aid the usability of the widgets. The autoHighlight and typeAhead features can help reduce the number of user actions it takes to submit a valid selection. The prehighlightClassName feature provides an supplemental visual feedback for mouse events.

Additionally, the second AutoComplete instance also has been enhanced to display two data fields in the container: the area code and the area code's state. The forceSelection feature has been enabled to prevent the user from typing in a free-form selection.

Sample Code

CSS:

#statesmod {position:relative;}

#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/

#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */

#statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}

#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}

#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}

#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}

#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}

#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}

#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}

#statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}

Markup:

JavaScript:

var statesArray = [

"Alabama",

"Alaska",

"Arizona",

"Arkansas",

"California",

"Colorado",

"Connecticut",

"Delaware",

"Florida" // Entire array not shown

];

var areacodesArray = [

["201", "New Jersey"],

["202", "Washington, DC"],

["203", "Connecticut"],

["204", "Manitoba, Canada"],

["205", "Alabama"],

["206", "Washington"],

["207", "Maine"] // Entire array not shown

];

// Instantiate first JS Array DataSource

oACDS = new YAHOO.widget.DS_JSArray(statesArray);

// Instantiate first AutoComplete

oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);

oAutoComp.queryDelay = 0;

oAutoComp.prehighlightClassName = "yui-ac-prehighlight";

oAutoComp.typeAhead = true;

oAutoComp.useShadow = true;

// Instantiate second JS Array DataSource

oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);

// Instantiate second AutoComplete

oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);

oAutoComp2.queryDelay = 0;

oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";

oAutoComp2.typeAhead = true;

oAutoComp2.useShadow = true;

oAutoComp2.forceSelection = true;

oAutoComp2.formatResult = function(oResultItem, sQuery) {

var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";

return (sMarkup);

};

AutoComplete Widget :: JavaScript Array

Find a state:

Find an area code

DataSource

AutoComplete

Sample Code