Example: AutoComplete - JavaScript Array (YUI Library)

# AutoComplete Widget :: JavaScript Array

### Find a state:

### Find an area code

There are two AutoComplete widgets on this page that each point to a different DS_JSArray DataSource instance. Driving each DataSource is a local JavaScript array of strings: `statesArray` and `areaCodesArray`. By pointing to arrays that are already loaded into memory the widget is very fast to return data. Therefore, both AutoComplete instances are configured to have a query delay of zero seconds.

Enabling the `prehighlightClassName` feature provides supplemental visual feedback for mouse events on results in the container.

The `formatResult` method of the second AutoComplete instance has been enhanced to display two data fields in the container, and the `forceSelection` property 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 {_position:absolute;width:100%;height:1.4em;z-index:0;} /* abs for ie quirks */ #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:

<!-- AutoComplete begins --> <div id="statesmod"> <form onsubmit="return YAHOO.example.ACJSArray.validateForm();"> <h3>Find a state:</h3> <div id="statesautocomplete"> <input id="statesinput"> <div id="statescontainer"></div> </div> <h3>Find an area code</h3> <div id="statesautocomplete2"> <input id="statesinput2"> <div id="statescontainer2"></div> </div> </form> </div> <!-- AutoComplete ends -->

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.useShadow = true; oAutoComp.minQueryLength = 0; oAutoComp.textboxFocusEvent.subscribe(function(){oAutoComp.sendQuery("");}); // 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.useShadow = true; oAutoComp2.forceSelection = true; oAutoComp2.formatResult = function(oResultItem, sQuery) { var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")"; return (sMarkup); };