YUI Library Examples: AutoComplete Control: Query a JavaScript Array for In-memory Data

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.statesArray = [
	"Alabama",
	"Alaska",
	"Arizona",
	"Arkansas",
	"California",
	"Colorado",
	"Connecticut",
	"Delaware",
	"Florida",
    ... // Entire array not shown
];

YAHOO.example.areacodesArray = [
	["201", "New Jersey"],
	["202", "Washington, DC"],
	["203", "Connecticut"],
	["204", "Manitoba, Canada"],
	["205", "Alabama"],
	["206", "Washington"],
	["207", "Maine"],
    ... // Entire array not shown
];

YAHOO.example.ACJSArray = new function() {
    // Instantiate first JS Array DataSource
    this.oACDS = new YAHOO.widget.DS_JSArray(YAHOO.example.statesArray);

// Instantiate first AutoComplete
    this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
    this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
    this.oAutoComp.typeAhead = true;
    this.oAutoComp.useShadow = true;
    this.oAutoComp.minQueryLength = 0;
    this.oAutoComp.textboxFocusEvent.subscribe(function(){
        var sInputValue = YAHOO.util.Dom.get('statesinput').value;
        if(sInputValue.length === 0) {
            var oSelf = this;
            setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
        }
    });

// Instantiate second JS Array DataSource
    this.oACDS2 = new YAHOO.widget.DS_JSArray(YAHOO.example.areacodesArray);

// Instantiate second AutoComplete
    this.oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', this.oACDS2);
    this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
    this.oAutoComp2.typeAhead = true;
    this.oAutoComp2.useShadow = true;
    this.oAutoComp2.forceSelection = true;
    this.oAutoComp2.formatResult = function(oResultItem, sQuery) {
        var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
        return (sMarkup);
    };
};

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: AutoComplete Control: Query a JavaScript Array for In-memory Data

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources:

YUI Library Examples: AutoComplete Control: Query a JavaScript Array for In-memory Data

AutoComplete Control: Query a JavaScript Array for In-memory Data

Find a state:

Find an area code

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: