# UFD 0.6 demonstration index

# UFD base demonstration page

## uiCss combo

This show the jQuery UI CSS (themeroller) support. You will need to pick a skin above to see it properly.

Choose a country:

## basic combo

Try this basic example usecase for UFD. It works like a normal dropdown, but you can start typing to filter.

Infix search; choose a country:
Prefix search; c hoose a country:

## width control

Sizing defaults to autosize. UFD sets the exact same width as the master select, unless the original is below the "minWidth" option, or manualWidth is set.

default: match original width (autosize)
Content less then minWidth of 100px
manualWidth @ 100px
Content more than maxWidth of 100px
maxWidth of 100px and listWidthFixed = false

## Free text

This combobox below allows freetext, submitting text back using the original selects' name. All change, focus, blur events are still propagated back to the (renamed) master. Exact text matches, cursor and mouse selection will update the master also. Note that the ENTER key has slightly different behavior; it doesn select the first matched item, enabling free-text to work. Cursor or mouse to select partial matches.

Choose a country:

## Functions

This shows the useful functions you can call on widgets. There are duplicate labels, so you can't filter to a single value. The original order is preserved, and you can create and destroy multiple times to confirm that the correct instance is selected in each case.

Choose a country:

## Skins, emphasis and homeEndForCursor

the 3 skins bundled with UFD. Each has the (experimental) addEmphasis option. The last one is a CSS only template to help you markup your own needs.

These dropdowns have the option "homeEndForCursor: true" set, making the home and end key work on the cursor location, not the list selection.

sexy skin: choose a country:
plain skin: choose a country:
custom skin: choose a country:

## Special characters and emphasis

Regexp chars and a tag
Emphasis with regexp chars and a tag
Raw Select tag

## Empty select

Nothing!

## zIndex correction on iE6

The combobox works over select input, working around the iE6 zindex problem using bgiframe.

Choose a country:
example

## Log