Give us a call 203-379-0773
Check out our Angular Book Series.

A Flex AutoCompleteMultiSelect Component

I am surprised to announce a brand new Flextras component. A consulting client wanted an AutoComplete component which would allow multiple items to be selected in the drop down. So, I built them one. This component is an extension to the Flextras Spark AutoComplete component that allows for multiple items to be selected in the drop down. The new component has a few variations, so let's talk about them.

Getting the Code

Ever since we shut down the Flextras store, we are no longer updating binary builds on the Flextras web site. You can get the updated code from our GitHub repository. I recommend building it into a SWC with a Flex Library project. Here are instructions to do that from Flash Builder:

  1. Create a Flash Builder Library Project
  2. Put the Spark directory into the Flash Builder Library Project's source directory.
  3. Include design.xml and manifest.xml in project [Optional]
    1. Bring up project properties on your Library Project
    2. Select Flex Library Build Path
    3. Select Assets
    4. Select design.xml and manifest.xml
  4. Set up namespace URL [Optional]:
    1. Bring up project properties on your Library Project
    2. Select Flex Library Compiler
    3. Click Browse next to manifest file; and select the manifest file on your disc
    4. Enter "http://www.flextras.com/mxml" in the namespace URL box
  5. From the Project menu select Clean; and your Library Project's bin directory should have built a SWC.

Now you can add the library project, or generated SWC, to the library path of a main Flex project to create the application.

Generic AutoCompleteMultiSelect

Once you have the library SWC compiled, you create a simple application to demonstrate the AutoCompleteMultiSelect like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:flextras="http://www.flextras.com/mxml">

    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                {label:'Arizona',data:3},
                {label:'Connecticut',data:7},
                {label:'Delaware',data:8},
                {label:'Florida',data:9},
                {label:'Oklahoma',data:36},
                {label:'Oregon',data:37},
                {label:'Pennsylvania',data:38},
                {label:'Wyoming',data:50},
                
            ]);
        ]]>

    </fx:Script>
<flextras:AutoCompleteMultiSelect dataProvider="{this.dataProvider}"/>
</s:Application>

This demo application starts with the Application tag, as Flex applications often do. There is a script block which creates an ArrayCollection as a dataProvider. Then there is the AutoCompleteMultiSelect component. The AutoCompleteMultiSelect will be in the flextras namespace if you compiled it as per previous instructions. Specify the dataProvider on the AutoCompleteMultiSelect instance and run the application:

The AutoComplete input is put inside the drop down with the default skin. You can type inside it to see the list get filtered:

You can select an item by clicking on it. You can use the control key when clicking to add items to a selection. When you want to select a range, then select the first item and hold down the shift key when clicking the second item. All items between the first and second item will be selected. This is probably what you are used to from the Flex list. The selected items will show up visually in the drop down, and also show up in the prompt area:

The items are separated by a comma; however you can change it using the delimiter property on the component. Go play with this sample or get the source.

It is worth nothing that the component also exposes all the selected items using a savedSelectedItems property. If you need to access all the selected items, this is the best way to do so. The selectedItems or selectedIndices properties relate back to the dataProvider, which may have filtered out selected items if you have typed something in the AutoComplete input.

Use the component as an MultiSelectDropDownList

In the process of developing this component, I also created a skin without the AutoComplete functionality, essentially creating a MultiSelectDropDownList. The skin is named DropDownListMultiSelectSkin.mxml and is located in the spark.flextras.autoCompleteMultiSelect directory.

You can create a new application, similar to the previous one and just set the skinClass property on the AutoCompleteMultiSelect component

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:flextras="http://www.flextras.com/mxml">

    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                {label:'Arizona',data:3},
                {label:'Connecticut',data:7},
                {label:'Delaware',data:8},
                {label:'Florida',data:9},
                {label:'Oklahoma',data:36},
                {label:'Oregon',data:37},
                {label:'Pennsylvania',data:38},
                {label:'Wyoming',data:50},
                
            ]);
        ]]>

    </fx:Script>
<flextras:AutoCompleteMultiSelect dataProvider="{this.dataProvider}"
skinClass="spark.flextras.autoCompleteMultiSelect.DropDownListMultiSelectSkin"/>

</s:Application>

Run this application to see the working app:

Open the drop down by clicking the button, and select a few items. You should see something like this:

You can play around with the live application. or get the source.

Adding a Checkbox Renderer

I created one other component in this new round of Flextras development. My client wanted a renderer with a checkbox that would represent the state of an item. I created a CheckboxAutoCompleteRenderer.as in the spark.flextras.autoCompleteMultiSelect.renderers directory. You can use it in an application like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:flextras="http://www.flextras.com/mxml">

    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                {label:'Arizona',data:3},
                {label:'Connecticut',data:7},
                {label:'Delaware',data:8},
                {label:'Florida',data:9},
                {label:'Oklahoma',data:36},
                {label:'Oregon',data:37},
                {label:'Pennsylvania',data:38},
                {label:'Wyoming',data:50},
                
            ]);
        ]]>

    </fx:Script>
<flextras:AutoCompleteMultiSelect dataProvider="{this.dataProvider}"
                                     itemRenderer="spark.flextras.autoCompleteMultiSelect.renderers.CheckboxAutoCompleteRenderer"/>


</s:Application>

The only change in this from the original sample is that it includes an itemRenderer on the AutoCompleteMultiSelect.

Select a few items to see the checkbox work. The interesting thing about this renderer is that if you click the checkbox, you do not have to use the control key to select multiple items in the drop down:

The CheckBox Renderer also has AutoComplete functionality, and will highlight the typed text inside the renderer's label display:

You can check out a running sample or get the source.

Final Thoughts

Since we shut down the Flextras store, I didn't think I'd be spending much more time on it, but a client came along with some specific extensions to our component set and I was happy to work with them to make these changes, and I'm equally happy to share them with the Flex community. I hope you find them useful.

We are willing to entertain similar requests from other clients if you have a need be sure to email us to discuss.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)