YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: AutoComplete Control: Skinning Model

AutoComplete Control: Skinning Model

This example demonstrates the CSS applied to an implementation of the AutoComplete control that uses the "Sam Skin". You can read more about the general approach to skinning YUI components in this in-depth article. Change any or all of the skin and implementation CSS for a more customized look and feel.

In order to enable the new skinning model, AutoComplete expects a wrapper DIV element around the INPUT element and the container DIV element, in this fashion:

    <div id="myAutoComplete">
        <input type="text" id="myInput">
        <div id="myContainer"></div>

Implementers who are working with data from third-party sources, user input data, or otherwise untrustworthy sources should be sure to read the Security Considerations section of the AutoComplete user guide.

Sample Code

DOM Overview:

AutoComplete CSS:

Implementation CSS:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings