Flex AutoComplete: Version 1.0

It’s been about a year since first creating the component. I’ve been using it extensively in the applications I work on and it’s been downloaded thousands of times. At this point I’m pretty confident in saying that it works reliably.

Latest version

If you’re already using the component you probably noticed that there’s now a “Latest version” link (rather than the old Demo and Download links). I’ve decided to set up a permanent page on my blog for the component. The important info (ie, the component’s license) is currently scattered amongst the past posts, this way I can keep everything together in one place.

Here’s what’s changed in this release

  • Added support for XMLListCollections: You can now use either an ArrayCollection or an XMLListCollection as the dataProvider.
  • ListBuilder is now a first class component: I’ve refactored the code to support using the ListBuilder on it’s own.
  • Added browserFilterFunction: I’ve added a browserFilterFunction which enables applying a separate filter which is applied to the results shown in the browser. I sometimes show a mix of items in the component. I use this to offer multiple browse options in the actionMenu in the AdvancedAutoComplete.
  • Bug fixes and tweaks: As always, I’ve gone through all of the comments and fixed any issues people have found.

Thanks to e/o who’s spotted bugs, suggested improvements and just been supportive in getting the component to this state. There’s no doubt in my mind that sharing the component with the Flex community has made it far better than it otherwise would have been.


Flex AutoComplete: Version 0.98.2

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.

Latest version

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!

Flex AutoComplete: Version 0.98.1

At this point I’m spending most of my time cleaning up the code. I started working on the component about six months ago and I find that when I look back on some of the older parts of the code I realize I’ve learned far better ways of handling things.

Latest version

Here’s what’s new:

  • Added browserFields property: This property enables you to specify which fields to display in the browser DataGrid.
  • Reworked selectedItems: Adding/removing items from the selectedItems property will now update the values displayed in the AutoComplete.
  • Added “search” method: If you’re using the component with a dynamic dataProvider, you can use the search function to display the dropDown if there are any matches.
  • New demo: I’ve added two more tabs to the demo to show other examples of the component in action.
  • Bug fixes: As always, I’ve gone through all the comments on the blog and made sure any issues found have been resolved.

I can’t thank the community enough for the enormous amount of support I’ve received. I’ve learned a tremendous amount from the fixes people have submitted. Please keep it coming…


Flex AutoComplete: New batch of changes

If you’ve come straight to this post I’d recommend checking out the previous posts for this component for more info on using it.

Latest version

Here’s what’s new:

  • Ability to add new items: You can now select items which aren’t in the data provider. To enable this feature you need to set the isStrict property to false. I’ve also added an allowDuplicates flag which controls whether or not you can add an item more than once
  • Added style property: I’ve added a style property which lets you control how the selected items are displayed. There are currently 3 choices: Mac Mail, Facebook and underlined.
  • Created some documentation: It’s not great but at least it’s a start. You can find it in the zip file in the doc folder
  • A bunch of other small tweaks and bug fixes: I’ve tried to incorporate the changes suggested in comments in the blog but I’m sure I missed some things. Please let me know if you suggested a change which didn’t make it in and I’ll get it in a future release.
  • Changed component name to AutoComplete: I’ve decided that for clarity’s sake it’s better to call it AutoComplete (rather than Chooser). I’m sorry for the refactoring this will require (hopefully it should be pretty minimal)

I’ve put the codebase on Google Code. If you’re interested in getting involved in the project please let me know.


Flex AutoComplete: Almost there… (or so I thought)

If you’ve come straight to this post I’d recommend checking out the first and second posts for this component for more info on using it.

Latest version

Here’s what’s new:

  • Created new demos: I’ve added two more demos which demonstrate some common ways to use the component. The source for the demos is included in the zip.
  • Added support for a horizontal multiselect: The previous version of the component had a multiSelect mode but it took up a fair amount of screen real estate. I’ve added a multiSelectLayout property which can be set to either “vertical” or “horizontal”. Vertical makes it behave the same as it used to, while horizontal enables you to select multiple items within the TextInput component. I’ve added this option to the demo. I’m still working on this feature, in the next version I’d like to change the style to make it look like the multiselect in Facebook and Mac Mail
  • Improved support for selecting items not in the dataprovider: The best practice to accomplish this is to add a keyDown listener to the component. If the user clicked enter then check if the text property is set and the selectedItem property is null
  • Fixed minor bugs: I’ve gone through all the comments on the blog and tried to address any open issues. I’m sure I’ve missed some things, if you’ve made a suggestion in the past which didn’t make it in to this release please re-suggest it and I’ll try to get it into the next version

One last thing, I’ve added the component to the Adobe Flex Exchange. It’s a relativley new component so it doesn’t have any rating or reviews. If you’re using this component and find it useful it’d be very much appreciated if you could rate it on the site (or even better… write a review).

Thanks very much,