FoxyComboBox for Flex

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:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:defusion="http://www.defusion.org.uk/mxml"
layout="absolute">

<mx:Script source="countriesData.as" />
<mx:VBox horizontalAlign="center" width="100%" top="20">
  <mx:Text width="50%" height="120">
    <mx:htmlText>
    <![CDATA[
    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.

    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.
    ]]>
    </mx:htmlText>
  </mx:Text>

  <mx:VBox width="50%">
    <mx:HBox>
      <mx:Label fontWeight="bold" text="Standard ComboBox" width="140" />
      <mx:ComboBox dataProvider="{_dp}" />
    </mx:HBox>
    <mx:HBox>
      <mx:Label fontWeight="bold" text="FoxyComboBox" width="140" />
      <defusion:FoxyComboBox dataProvider="{_dp}" />
    </mx:HBox>

  </mx:VBox>
</mx:VBox>

</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.