Example: AutoComplete - JavaScript Function (YUI Library)

This example uses a DS_JSFunction DataSource with a JavaScript function that returns data as an array of strings. Since the data for this example is already loaded into memory, queries should be very fast to return data. Therefore, the AutoComplete instance is configured to have a query delay of zero seconds.

In this example, the AutoComplete instance is able to keep its container always open by customizing the appropriate CSS styles and enabling the alwaysShowContainer property. Hooking into the custom events containerExpandEvent and containerCollapseEvent and calling the setHeader, setBody, and setFooter methods dynamically updates the contents of the open container.

The container can be customized to display multiple data fields by customizing the AutoComplete's formatResults method.

Sample Code

CSS:

Markup:

JavaScript:

function getStates(sQuery) {
                aResults = [];
                if(sQuery && sQuery.length > 0) {
                    var charKey = sQuery.substring(0,1).toLowerCase();
                    var oResponse = dataset[charKey];

if(oResponse) {
                        for(var i = oResponse.length-1; i >= 0; i--) {
                            var sKey = oResponse[i].STATE;
                            var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());

// Query found at the beginning of the key string for STARTSWITH
                            // returns an array of arrays where STATE is index=0, ABBR is index=1
                            if(sKeyIndex === 0) {
                                aResults.unshift([sKey, oResponse[i].ABBR]);
                            }
                        }
                        return aResults;
                    }
                }
                // Empty queries return all states
                else {
                    for(var letter in dataset) {
                        var oResponse = dataset[letter];
                        for(var i = oResponse.length-1; i >= 0; i--) {
                            aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
                        }
                    }
                    return aResults;
                }
            }

var dataset =
                {'a': [{"STATE" : "Alabama", "ABBR" : "AL"},
            		{"STATE" : "Alaska", "ABBR" : "AK"},
            		{"STATE" : "Arizona", "ABBR" : "AZ"},
            		{"STATE" : "Arkansas", "ABBR" : "AR"}],
            	'b' : [
            		],
            	'c' : [
            		{"STATE" : "California", "ABBR" : "CA"},
            		{"STATE" : "Colorado", "ABBR" : "CO"},
                    {"STATE" : "Connecticut", "ABBR" : "CT"}] // Entire dataset not shown
                };

YAHOO.example.ACJSFunction = function(){
                var mylogger;
                var oACDS;
                var oAutoComp;

return {
                    init: function() {
                        //Logger
                        mylogger = new YAHOO.widget.LogReader("logger");

// Instantiate JS Function DataSource
                        oACDS = new YAHOO.widget.DS_JSFunction(getStates);
                        oACDS.maxCacheEntries = 0;

// Instantiate AutoComplete
                        oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
                        oAutoComp.alwaysShowContainer = true;
                        oAutoComp.queryDelay = 0;
                        oAutoComp.minQueryLength = 0;
                        oAutoComp.maxResultsDisplayed = 50;
                        oAutoComp.formatResult = function(oResultItem, sQuery) {
                            var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
                            return (sMarkup);
                        };

// Subscribe to Custom Events
                        oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);

// Set initial content in the container
                        oAutoComp.sendQuery("");
                    },

// Define Custom Event handlers
                    myOnDataReturn: function(sType, aArgs) {
                        var oAutoComp = aArgs[0];
                        var sQuery = aArgs[1];
                        var aResults = aArgs[2];

if(aResults.length == 0) {
                            oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
                        }
                    },

validateForm: function() {
                        // Validate form inputs here
                        return false;
                    }
                };
            }();

YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);

AutoComplete Widget :: JavaScript Function

Filter the US states:

Sample Code