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.
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.
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:
<!-- AutoComplete begins --> <div id="statesmod"> <form> <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 data source oACDS = new YAHOO.widget.DS_JSArray(statesArray); // Instantiate first auto complete oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS); oAutoComp.queryDelay = 0; oAutoComp.prehighlightClassName = "yui-ac-prehighlight"; oAutoComp.typeAhead = true; oAutoComp.useShadow = true; // Instantiate second data source oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray); // Instantiate second auto complete 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); };