YUI Library Home

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
  • 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.
  • Combo Box: Combobox example also demonstrates CSS required to support multiple stacked instances.
  • Tagging Example with alwaysShowContainer: Uses alwaysShowContainer to display and filter tags.
  • Custom Function to Search Different Fields at Runtime: Searches different fields of a two-dimensional array on the fly
  • 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

AutoComplete Control:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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