YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control

# AutoComplete Control: Examples

AutoComplete is a powerful interaction pattern that leverages both the power of the server and the power of the client. Examples here show how to use server-side completion engines, client-side completion engines, and rich visualizations within your suggestion container.

- Basic Local Data: Demonstrates the use of a manageably large JavaScript array to provide responsive, in-memory AutoComplete functionality without relying on a server-side component.
- Basic Remote Data: Uses an XHRDataSource to point to an online script serving delimited text data
- Screenreader Accessibility: A screenreader-accessible Autocomplete example.
- Customizing Remote Requests: Uses an XHRDataSource plus a local proxy to point to the Yahoo! Search webservice. The generateRequest() method must be customized to comply with the third-party API.
- Custom Formatting, with a Proxyless Remote DataSource: Uses a ScriptNodeDataSource to point to the Yahoo! Autdio Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. A custom formatResults() method has been defined to show thumbnail images within the results container.
- Searching Field A, Submitting Field B with itemSelectEvent: Uses itemSelectEvent to allow the user to search by name, but sumbits ID for the server to consume.
- Combobox, with CSS for Multiple Stacked Instances: This Combobox example also demonstrates CSS required to support multiple stacked instances.
- Tagging Example with alwaysShowContainer: Uses alwaysShowContainer to display and filter tags.
- FunctionDataSource to Search Multiple Fields of an Address Book at Runtime: Searches against first name, last name, and nickname using a FunctionDataSource
- Centering AutoComplete On a Page: Illustrates how to customize AutoComplete to be centered on a page.
- Subset Matching: Demonstrates how queryMatchSubset can be enabled to maximize caching. Note the custom CSS that is needed for stacking AutoComplete instances.
- Find Photos on Flickr: Uses AutoComplete to find photos on Flickr by tag, and keeps a collection of selected photos on the page.
- Configurations Dashboard: An interactive dashboard that allows you to manipulate many of AutoComplete's built-in configuration options and explore the impact of those changes on the UI.
- Skinning Model: Explanation of AutoComplete's skinning model.

## Other YUI Examples That Make Use of the AutoComplete Control

- Flickr Image Search (included with examples for the Rich Text Editor)
- Logger Integration with YUI Components (included with examples for the Logger Control)
- Datatable with Autocomplete (included with examples for the DataTable Control)
- Complex Application (included with examples for the Layout Manager)

### AutoComplete Control:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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