YUI Library Home

Site Search (YDN & YUIBlog):

# 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>
        </div>

Find a state:

## Sample Code

DOM Overview:

<label for="input">Find a state:</label> <div id="autocomplete" class="yui-ac"> <input id="input" type="text" class="yui-ac-input"> <div id="container" class="yui-ac-container"> <div class="yui-ac-content"> <div class="yui-ac-hd"></div> <div class="yui-ac-bd"> <ul> <li class="yui-ac-highlight"></li> <li class="yui-ac-prehighlight"></li> <li></li> ... </ul> </div> <div class="yui-ac-ft"></div> </div> <div class="yui-ac-shadow"></div> <iframe></iframe> </div> </div>

AutoComplete CSS:

/* styles for entire widget */ .yui-skin-sam .yui-ac { position:relative;font-family:arial;font-size:100%; } /* styles for input field */ .yui-skin-sam .yui-ac-input { position:absolute;width:100%; } /* styles for results container */ .yui-skin-sam .yui-ac-container { position:absolute;top:1.6em;width:100%; } /* styles for header/body/footer wrapper within container */ .yui-skin-sam .yui-ac-content { position:absolute;width:100%;border:1px solid #808080;background:#fff;overflow:hidden;z-index:9050; } /* styles for container shadow */ .yui-skin-sam .yui-ac-shadow { position:absolute;margin:.3em;width:100%;background:#000;-moz-opacity: 0.10;opacity:.10;filter:alpha(opacity=10);z-index:9049; } /* styles for results list */ .yui-skin-sam .yui-ac-content ul{ margin:0;padding:0;width:100%; } /* styles for result item */ .yui-skin-sam .yui-ac-content li { margin:0;padding:2px 5px;cursor:default;white-space:nowrap; } /* styles for prehighlighted result item */ .yui-skin-sam .yui-ac-content li.yui-ac-prehighlight { background:#B3D4FF; } /* styles for highlighted result item */ .yui-skin-sam .yui-ac-content li.yui-ac-highlight { background:#426FD9;color:#FFF; }

Implementation CSS:

/* styles for this implementation */ #autocomplete { width:15em; /* set width for widget here */ padding-bottom:2em; }

## 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.

### AutoComplete Control Examples:

- Basic Local Data
- Basic Remote Data
- Screenreader Accessibility
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combobox, with CSS for Multiple Stacked Instances
- Tagging Example with alwaysShowContainer
- FunctionDataSource to Search Multiple Fields of an Address Book at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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