YUI Library Examples: AutoComplete Control: Configurations Dashboard

AutoComplete Control: Configurations Dashboard

In this example, an AutoComplete instance is created that points to the same DataSource as the Flat-file Data example. However, by changing the values below, you can easily customize the configuration properties of the implementation.

View example in new window.

Search the Web Using Yahoo!'s Search API:

Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:

Animate Horizontally

Animate Vertically

Animation Speed:

Use Shadow

Use IFrame

Automatically Highlight First Item

Type Ahead

Force a Selection

Maximum Results:

Minimum Query Length:

Query Delay:

Delimiter Character(s) like ; or [";", ","]

Highlight Classname

Pre-highlight Classname

Allow Browser Autocomplete

Always Show Container

Set Header

Set Body

Set Footer

About the Configuration Dashboard Example

This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction. The first field in the form is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it. The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes feel in the browser.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

AutoComplete Control Examples:

More AutoComplete Control Resources:

User's Guide (external)
API Documentation
Cheat Sheet (external; pdf)