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.

• Query a JavaScript Array for In-memory Data: Demonstrates the use of a manageably large JavaScript array to provide responsive, in-memory AutoComplete functionality without relying on a server-side component.
• Query a JavaScript Function for In-memory Data: Demonstrates the use of a custom function to process in-memory data and provide rapid AutoComplete responses without relying on a server-side component.
• Use AutoComplete to access the Yahoo! Search JSON API: Illustrates the use of AutoComplete with a web service returning JSON data.
• Use AutoComplete to access the Yahoo! Search XML API: Illustrates the use of AutoComplete with a web service returning XML data.
• Use AutoComplete to access flat-file data from a web service: Illustrates the use of AutoComplete with a web service returning flat-file data via a custom PHP script.
• Use AutoComplete with Flickr's XML Webservice: Illustrates the use of AutoComplete with an XML-based webservice and the inclusion of images in the suggestion container.
• Proxyless AutoComplete pointing to the Yahoo! Search API: Illustrates the integration of AutoComplete with the YUI's Get Utility to achieve proxyless data retrieval through the use of dynamic script node insertions.
• 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 (beta))
• Logger Integration with YUI Components (included with examples for the Logger Control)
• Datatable with Autocomplete (included with examples for the DataTable Control (beta))