Example: AutoComplete - JavaScript Function (YUI Library)

# AutoComplete Widget :: JavaScript Function

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.

## Filter the US states:

### Sample Code

CSS:

#statesmod {position:relative;padding:1em;} #statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/ #statesinput {position:absolute;width:100%;height:1.4em;} #statescontainer {position:absolute;top:1.7em;width:100%;} #statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;} #statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;} #statescontainer ul {padding:5px 0;width:100%;} #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;} #statescontainer li.yui-ac-highlight {background:#ff0;}

Markup:

<!-- AutoComplete begins --> <div id="statesmod"> <form onsubmit="return YAHOO.example.ACJSFunction.validateForm();"> <h2>Filter the US states:</h2> <div id="statesautocomplete"> <input id="statesinput"> <div id="statescontainer"></div> </div> </form> </div> <!-- AutoComplete ends -->

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