flex combobox hide and show down arrow

Question

I am looking to implement a search text box as follows:

When user starts typing in and there are non-zero results, the text box will open up and display the results below it. When the user selects a result, the text box closed, but this time with a down-arrow (like a combobox) so that the user can re-open the list.

I suspect what I really need is a combobox with ability to hide/show the down arrow. How do I do this in Flex?

Thanks in advance.

Answer 1

How about creating a simple custom canvas with both components (textinput and combo) with two states. You display the textinput in one state and the combo in the other state?

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:states>
        <mx:State name="combo">
            <mx:RemoveChild target="{textinput1}"/>
            <mx:AddChild position="lastChild">
                <mx:ComboBox x="48" y="10"></mx:ComboBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:TextInput x="48" y="10" id="textinput1"/>
    <mx:Label x="10" y="12" text="Text"/>

</mx:Canvas>

Answer 2

You could also provide a custom button skin for either case, which would be accessible by changing the styleName. This would potentially be lighter weight than user294702's solution.

For example, using dummy names for source and symbols:

.comboBoxWithArrow {
  up-skin: Embed(source="graphics.swf",symbol="comboArrowUp");
  down-skin: Embed(source="graphics.swf",symbol="comboArrowDown");
  over-skin: Embed(source="graphics.swf",symbol="comboArrowOver");
  disabled-skin: Embed(source="graphics.swf",symbol="comboArrowDisabled");
  /* and any other skin states you want to support */
}

.comboBoxWithoutArrow {
  up-skin: Embed(source="graphics.swf",symbol="comboNoArrowUp");
  down-skin: Embed(source="graphics.swf",symbol="comboNoArrowDown");
  over-skin: Embed(source="graphics.swf",symbol="comboNoArrowOver");
  disabled-skin: Embed(source="graphics.swf",symbol="comboNoArrowDisabled");
  /* and any other skin states you want to support */
}

If your conditions warrant it, set the styleName to the one that shows the arrow, otherwise set it to the one that shows no arrow.

Answer 3

I found out an easy way to do this:

setStyle("arrowButtonWidth", 0);

In my custom combobox, I set the initial width of the arrow button to 0.

Then in the List change event,

  addEventListener(ListEvent.CHANGE, changeHandler);

if the size of the dataprovider is greater than 1, the arrow width is set back to (say) 20

  setStyle("arrowButtonWidth", 20);

This approach is much simpler than the above approaches. If you know any pitfall of my approach, please share.

Answer 4

crazyhorse-

could you post your solution here? I'm interested in seeing it. thanks