Yahoo! Developer Network Home - Help

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.

Filter the US states:

Sample Code

CSS:

Markup:

JavaScript:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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