Tagging Example with alwaysShowContainer
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#myAutoComplete {
width:20em; /* set width here or else widget will expand to fit its container */
padding-bottom:20em; /* allow enough real estate for the container */
}
.yui-skin-sam .yui-ac-content { /* set scrolling */
max-height:18em;overflow:auto;overflow-x:hidden; /* set scrolling */
_height:18em; /* ie6 */
}
Tagging Example with alwaysShowContainer
This AutoComplete interaction uses the alwaysShowContainer feature to allow users to find and select tags. Showing the set of previously used tags as a visual enhancement discourages unneccessary duplication of similar tags. As is common for tagging, comma- and semi-colon delimiters have also been enabled. Note that an initial query is needed on page load to get the container to display the first time with the full set of data. Since the container is meant to stay open, CSS is used to give it proper real estate on the page, including scrolling to show a potentially long list of tags.