Yahoo! Developer Network Home - Help

YDN Site Search

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

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

There are two AutoComplete widgets on this page that each point to a different DS_JSArray DataSource instance. Driving each DataSource is a local JavaScript array of strings: `statesArray` and `areaCodesArray`. By pointing to arrays that are already loaded into memory the widget is very fast to return data.

Enabling the `prehighlightClassName` feature provides supplemental visual feedback for mouse events on results in the container.

The `formatResult` method of the second AutoComplete instance has been enhanced to display two data fields in the container, and the `forceSelection` property has been enabled to prevent the user from typing in a free-form selection.

View example in new window.

### Find a state:

### Find an area code

## Sample Code

CSS:

/* custom styles for multiple stacked instances */ #statesautocomplete, #statesautocomplete2 { width:15em; /* set width here */ padding-bottom:2em; } #statesautocomplete { z-index:9000; /* z-index needed on top instance for ie & sf absolute inside relative issue */ } #statesinput, #statesinput2 { _position:absolute; /* abs pos needed for ie quirks */ }

Markup:

<h3>Find a state:</h3> <div id="statesautocomplete"> <input id="statesinput" type="text"> <div id="statescontainer"></div> </div> <h3>Find an area code</h3> <div id="statesautocomplete2"> <input id="statesinput2" type="text"> <div id="statescontainer2"></div> </div>

JavaScript:

YAHOO.example.statesArray = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", ... // Entire array not shown ]; YAHOO.example.areacodesArray = [ ["201", "New Jersey"], ["202", "Washington, DC"], ["203", "Connecticut"], ["204", "Manitoba, Canada"], ["205", "Alabama"], ["206", "Washington"], ["207", "Maine"], ... // Entire array not shown ]; YAHOO.example.ACJSArray = new function() { // Instantiate first JS Array DataSource this.oACDS = new YAHOO.widget.DS_JSArray(YAHOO.example.statesArray); // Instantiate first AutoComplete this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS); this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight"; this.oAutoComp.typeAhead = true; this.oAutoComp.useShadow = true; this.oAutoComp.minQueryLength = 0; this.oAutoComp.textboxFocusEvent.subscribe(function(){ var sInputValue = YAHOO.util.Dom.get('statesinput').value; if(sInputValue.length === 0) { var oSelf = this; setTimeout(function(){oSelf.sendQuery(sInputValue);},0); } }); // Instantiate second JS Array DataSource this.oACDS2 = new YAHOO.widget.DS_JSArray(YAHOO.example.areacodesArray); // Instantiate second AutoComplete this.oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', this.oACDS2); this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight"; this.oAutoComp2.typeAhead = true; this.oAutoComp2.useShadow = true; this.oAutoComp2.forceSelection = true; this.oAutoComp2.formatResult = function(oResultItem, sQuery) { var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")"; return (sMarkup); }; };

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