AutoComplete Widget :: JavaScript Array

Find a state:

Find an area code

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:


    <!-- 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);

    };