Yahoo! Developer Network Home - Help

YDN Site Search

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

# AutoComplete Control: Query a JavaScript Function for In-memory Data

This example uses a DS_JSFunction DataSource pointing to 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, and since there is no server load concern, the AutoComplete instance can be 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. We hook into the custom events `containerExpandEvent` and `containerCollapseEvent` and calling the `setHeader()`, `setBody()`, and `setFooter()` methods to dynamically update the contents of the open container. Finally, the AutoComplete's `formatResults()` method has been customized to display multiple data fields in the container.

View example in new window.

### Filter the US states:

## Sample Code

CSS:

/* custom styles for scrolling container */ #statesautocomplete { width:15em; /* set width of widget here*/ height:12em; /* define height for container to appear inline */ } #statescontainer .yui-ac-content { max-height:11em;overflow:auto;overflow-x:hidden; /* scrolling */ _height:11em; /* ie6 */ }

Markup:

<h3>Filter the US states:</h3> <div id="statesautocomplete"> <input id="statesinput" type="text"> <div id="statescontainer"></div> </div>

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()); if (sKeyIndex === 0) { aResults.unshift([sKey, oResponse[i].ABBR]); } } return aResults; } } 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 = new function(){ // Instantiate JS Function DataSource this.oACDS = new YAHOO.widget.DS_JSFunction(getStates); this.oACDS.maxCacheEntries = 0; // Instantiate AutoComplete this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS); this.oAutoComp.alwaysShowContainer = true; this.oAutoComp.minQueryLength = 0; this.oAutoComp.maxResultsDisplayed = 50; this.oAutoComp.formatResult = function(oResultItem, sQuery) { var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")"; return (sMarkup); }; // Show custom message if no results found this.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>"); } }; this.oAutoComp.dataReturnEvent.subscribe(this.myOnDataReturn); // Preload content in the container this.oAutoComp.sendQuery(""); };

### 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.

### AutoComplete Control Examples:

- Query a JavaScript Array for In-memory Data
- Query a JavaScript Function for In-memory Data
- Use AutoComplete to access the Yahoo! Search JSON API
- Use AutoComplete to access the Yahoo! Search XML API
- Use AutoComplete to access flat-file data from a web service
- Use AutoComplete with Flickr's XML Webservice
- Proxyless AutoComplete pointing to the Yahoo! Search API
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor (beta))
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control (beta))
- Complex Application (included with examples for Layout Manager (beta))

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings