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.



basic combo

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





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.




















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.



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.









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.








Special characters and emphasis








Empty select




zIndex correction on iE6

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








example






Log