AutoComplete Widget :: JS Function Example

DataSource

This DataSource instance points to an in-memory JavaScript function that returns results in an array. The function queries against an in-memory object literal of data that holds the 50 US states and their corresponding postal abbreviations.

AutoComplete

Since the DataSource 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. The AutoComplete instance is also configured to display two data fields in its container: the state and its corresponding postal abbreviation. By setting the alwaysShowContainer property to true and customizing appropriate CSS styles, the container has been implemented to always be displayed. Custom event handlers have been hooked into containerExpandEvent and containerCollapseEvent to dynamically update the always open container's contents.

Sample Code

CSS:

Markup:

JavaScript:

function getStates(sQuery) {

aResults = [];

if(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;

}

else { return null; }

}

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

// Instantiate AutoComplete

oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);

oAutoComp.alwaysShowContainer = true;

oAutoComp.queryDelay = 0;

oAutoComp.maxResultsDisplayed = 8;

oAutoComp.useShadow = true;

oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");

oAutoComp.formatResult = function(oResultItem, sQuery) {

var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";

return (sMarkup);

};

// Subscribe to Custom Events

oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);

oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);

// 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>");

}

myOnContainerCollapse: function(sType, aArgs) {

var oAutoComp = aArgs[0];

oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");

validateForm: function() {

// Validate form inputs here

return false;

}

};

}();

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

AutoComplete Widget :: JavaScript Function

DataSource

AutoComplete

Find a state:

Sample Code