Details

Download
Version 1.0.0
Last updated 16th October 2006
Requirements
Demo View demo page
License BSD License
Changelog
1.0.0
  • Initial verison

About

The FoxyComboBox extends the ComboBox in Flex 2 to provide Firefox-like option selection as you type. See the post on the back story of this component for more details about where it came from and how it was a lot more difficult to implement than I first expected.

The default functionality of the ComboBox is that when you type any letter it selects the first item in the list that starts with that letter (pressing the letter again selects the next option which starts with that letter), it will only ever select an item which starts with the letter you have typed.

The FoxyComboBox goes beyond that allowing you to type part of a word (or a few words) to jump straight to an option which starts with that part word etc.

The FoxyComboBox will continue to update the selected item as you type with the match getting more and more precise, it will stop when there is no more items that match the input string.

With the FoxyComboBox the search string is built upon as you type to achieve this functionality, but it is reset if there is a period of typing in-activity (as defined by the inactivityResetTimeout property).

Usage

Once the FoxyComboBox.swc is added to your library path for the Flex compiler usage is as simple as replacing any instances of the <mx:ComboBox ... > with the <defusion:FoxyComboBox ...>.

Example

The following example is provided in the download for the FoxyComboBox:

Display code as plain text
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     xmlns:defusion="http://www.defusion.org.uk/mxml"
  5.     layout="absolute">
  6.    
  7.     <mx:Script source="countriesData.as" />
  8.     <mx:VBox horizontalAlign="center" width="100%" top="20">
  9.         <mx:Text width="50%" height="120">
  10.             <mx:htmlText>
  11.             <![CDATA[
  12.             Try selecting a ComboBox and then typing to select a country in each of the combo boxes, in the standard one you will only be able to select the first country that begins with the letter you type.
  13.  
  14.             With the <b>FoxyComboBox</b> you will be able to type the beginning of the option as a string to go straight to that option. E.g. typing "aust" will get you to Australia, continuing and typing "austri" will get you to Austria.
  15.             ]]>
  16.             </mx:htmlText>
  17.         </mx:Text>
  18.    
  19.         <mx:VBox width="50%">
  20.             <mx:HBox>
  21.                 <mx:Label fontWeight="bold" text="Standard ComboBox" width="140" />
  22.                 <mx:ComboBox dataProvider="{_dp}" />
  23.             </mx:HBox>
  24.             <mx:HBox>
  25.                 <mx:Label fontWeight="bold" text="FoxyComboBox" width="140" />
  26.                 <defusion:FoxyComboBox dataProvider="{_dp}" />
  27.             </mx:HBox>
  28.            
  29.         </mx:VBox>
  30.     </mx:VBox> 
  31.    
  32. </mx:Application>

Properties

inactivityResetTimeout obj
You can customise the amount of in-activity time allowed before the search string is reset by using the inactivityResetTimeout property. The default in-activity timeout is 1000 milliseconds.

Next Steps

Download

Demo

View the demo pages for the FoxyComboBox for Flex

Leave a Tip

If you find this code useful you can leave a donation towards the continued development & support.

Comments

There have been 4 comments so far, join the discussion.

1. Jeffry Houser - 17th Oct 2007 - 4:37 pm

Cool idea. It seems to work sporadically, though.

When I select the foxyComboBox and type “austri” it jumps to “Iceland” when I type in the I, not “Austria”.

Is there some kind of time delay at which point it resets itself to start typing anew?

2. Dave - 17th Oct 2007 - 4:40 pm

Jeffry:
The is a time delay that resets itself, but that’s only after a period of typing in-activity. The default is 1000 milliseconds which I feel should be more than enough, but it is possible to set this to anything.

3. Jeffry Houser - 17th Oct 2007 - 5:37 pm

My problems must have been related to the time delay. I was distracted as I was playing with it. :-)

4. RioVic - 9th Apr 2008 - 10:29 pm

This is a really cool component. I appreciate your work. Thank you! I noticed that for me at least, the inactivityResetTimeout seems to work as the total elapsed time, and not as the time since hitting the previous character. Maybe somehting to do with Flex builder 3. But I simply set it to 7000 and that give the user pelnty of time to type the whole string.

Thanks again!

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)