Example: AutoComplete - JavaScript Array (YUI Library)

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.

A few configurations have also been made to aid usability. The properties autoHighlight and typeAhead have been enabled to help reduce the number of user interactions. Enabling the prehighlightClassName paramter provides supplemental visual feedback for mouse events.

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:

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

Sample Code