Note: The interface for the component has been changed a fair bit in this version. If you’re upgrading, please refer to this post to determine the changes you’ll need to make.
I’ve found that I very often need to use the component as a basic autocomplete combobox, without all the extra jazz. To simplify things, I’ve split the component into two classes: AutoComplete and AdvancedAutoComplete.
I’ve moved a lot of the extra features (such as browsing and ordering) to the AdvancedAutoComplete component. The demo and documentation provide breakdowns of which features are where.
The catch with this approach is if you need one of the features from the advanced component you have to take them all. It looks like Gumbo will implement changes to the component framework which will enable implementing a better solution. I’m planning to rework the component once it’s officially released.
Additionally, I’ve changed the names of a number of properties to better follow the conventions used throughout the Flex framework.
| Old Name | New Name |
|---|---|
| isMultiSelect | allowMultipleSelection |
| multiSelectLayout | selectionLayout |
| isStrict | allowNewValues (note: logic is reversed) |
| areNewItemsEditable | allowEditingNewValues |
| isBrowseable | showBrowseButton |
| isOrderable | showOrderButtons |
| styleName | selectedItemStyleName (note: now a style) |
Here’s what’s new…
- Created inlineButton feature: You can now set a button to appear at the end of the combobox.
- Added Actions Menu: I’ve used the new inlineButton feature to implement an actions menu in the AdvancedAutoComplete component. The feature is enabled by setting a value for the actionsMenuDataProvider property. I’ve added the option to the advanced tab in the demo.
- Support for skins: The selected items have been changed to buttons which has enabled me to rework the MacMail and Facebook styles as skins. I’ve created a CustomSkin example application which demonstrates how to create your own skin. If you end up creating any nice skins please send them my way. One note here, if you’re using the source you’ll need to include the defaults.css file in your app.
- Added autoSelectEnabled property: One of the most common questions posted is how to prevent the component from automatically selecting a match. You used to have to create a function which always returned false for the isEqualFunction property. You can now simply set autoSelectEnabled to false. If you’d like to implement a custom function you can set it in the autoSelectFunction property.
- Bug fixes and tweaks: As always, I’ve gone through all of the comments and fixed any bugs which people have spotted.
Lastly, I wanted to thank Demetri for convincing me to create it, creating the icons and guiding the UI decisions along the way and Tarak for allowing me to share it (and introducing me to Flex). Thanks guys!
Hillel Coren 