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