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)