3

I have a ComboBox and the data provider is an ArrayCollection of 3 values: CA - California, NY - New York, TX - Texas. With the default behavior when I start typing in the ComboBox it will try to match the value from the beginning of the string, so if I start Typing TX it will bring up TX - Texas.

I want to be able to search at any part of the string and not just from the beginning, so if I type "xas" it will filter out the selection and only show TX - Texas. There is a very helpful post in the Adobe forums here on how to do this by changing the filter function on the ArrayCollection which provides data for the ComboBox and I have adapted it but I am having a slight issue with it.

If a user selects a value and then tries to enter in new text the first letter typed in the ComboBox does not show up.

1) Select the value CA - California in the ComboBox
2) Highlight the text and hit "n" on your keyboard
3) You would expect to see the textbox populated with "n" but the textbox remains empty

What could be causing this issue? It only happens if you already have a value selected. If you start with a blank ComboBox it works as expected.

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        import spark.events.TextOperationEvent;

        [Bindable]
        public var arrC:ArrayCollection = new ArrayCollection([{label:'CA - California'},{label:'NY - New York'},{label:'TX - Texas'}]);

        private function changeHandler(e:*):void
        {
            if (arrC.filterFunction != doFilter)
                arrC.filterFunction = doFilter;
            arrC.refresh();
        }

        private function doFilter(item:Object):Boolean
        {
            if(String(item.label).toLowerCase().indexOf(cb.textInput.text.slice(0 ,cb.textInput.selectionAnchorPosition).toLowerCase())>-1)             
            {
                return true;
            }
            return false;
        }                       

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            cb.textInput.addEventListener(TextOperationEvent.CHANGE,changeHandler );
        }

    ]]>
</fx:Script>

<s:ComboBox id="cb" dataProvider="{arrC}"/>
fyleow
  • 115
  • 2
  • 5
  • 1
    Have you considered an `AutoComplete` component instead of a `ComboBox`? http://flashcommander.org/blog/flex-4-autocomplete – Jason Towne May 20 '11 at 18:59
  • I know this is an old one, but our AutoCompleteComboBox brings the best of both worlds; an AutoComplete component and a ComboBox. https://www.flextras.com/index.cfm?event=ProductHome&productID=19 – JeffryHouser Jul 12 '11 at 02:58
  • It works fine with the given code as it is for the given steps (1,2,3). Any particular way to reproduce it? – M.D. Jul 19 '11 at 16:14
  • The way to reproduce it is steps 1-3 with the code sample I provided. I can reproduce this with a new Flex project using the 4.1 SDK. @www.Flextras.com Yes, that's what I ended up using. Thanks for creating such a great component and providing a free version. It was almost a drop in replacement for ComboBox but with added functionality. – fyleow Jul 21 '11 at 17:44

1 Answers1

7

Got a solution for your problem (because I had to work out a custom component behaving similar to the googles search input box). Seems the normal input processing gets into wrong ways by filtering the dataprovider. However I didnt examined the sources of the unexpected behaviour as deeply as needed to provide a solide explanation of the causing problem (the idea of a possible solution came too fast ;.)). Here it is:

<?xml version="1.0" encoding="utf-8"?>
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        skinClass="CGoogleComboSkin">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.IList;

        import spark.events.TextOperationEvent;

        private var unfilteredDataProvider : IList;
        override public function set dataProvider(value:IList):void {
            super.dataProvider = value;

            unfilteredDataProvider = value;
        }

        override protected function textInput_changeHandler(
                event:TextOperationEvent):void {
            super.textInput_changeHandler(event);

            if (unfilteredDataProvider is ArrayCollection) {
                ArrayCollection(unfilteredDataProvider).filterFunction = filterMatches;
                ArrayCollection(unfilteredDataProvider).refresh();

                super.dataProvider = new ArrayCollection(unfilteredDataProvider.toArray()); 
            }
        }

        protected function filterMatches(item:Object):Boolean {
            if (item is String) {
                if(String(item).toLowerCase().indexOf(
                    textInput.text.slice(0,
                        textInput.selectionAnchorPosition).toLowerCase())>-1)
                    return true;
            }
            else if (labelField && labelField!= "") {
                if(item.hasOwnProperty(labelField) && 
                        String(item[labelField]).toLowerCase().indexOf(
                        textInput.text.slice(0,
                        textInput.selectionAnchorPosition).toLowerCase())>-1)
                    return true;
            }

            return false;
        }
    ]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>

The idea behind this solution was to construct the custom Combobox by inheritance and overriding the setter of the dataprovider in a way to have the unfiltered dataprovider as unchanged source by any textoperation but let the flex combobox deal in its usual way with a collection where no filter is attached to (which is by any input allready the result of the filtering of the source collection). It was just a try but worked and was as fast applicable as I appreciated it ;.)

happy coding

Otto Panini
  • 86
  • 1
  • 3