AutoComplete Control: Configurations Dashboard

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 after the AutoComplete input textbox 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.

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:

TypeAhead Delay:

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

Highlight Classname

Pre-highlight Classname

Allow Browser Autocomplete

Always Show Container

Set Header

Set Body

Set Footer

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: AutoComplete Control: Configurations Dashboard

Configuration for This Example

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: