FilterComboBox

Here’s a little component I knocked out over the holiday period for use in a current project.

Its basically a rip of ComboBox (extends ComboBase due to private methods in ComboBox), that will filter the dataProvider depending on what the user enters into the TextInput, and select the text to show you where a match is found (can only select the first match in FP9). You can also set it to be case sensitive (false by default).

There’s a few other components out there with the same functionality (some you have to pay for some you don’t), most of which can be found doing a search for ‘AutoCompleteComboBox Flex’.

They either didn’t quite do what we wanted or were too complex for our needs.

(right click for source).

The source for FilterComboBox can be downloaded from our Google Code repository.

129 Responses to “FilterComboBox”

  1. troyworks says:

    Neat!

    I did a version in AS2.0 I’ve been meaning to convert, it indexed the various terms and created a predictive tree out of it. It unlike yours doesn’t deal with terms mid, but does perform nicely on big datasets once they are indexed.

    Happy New Year Tink!
    Troy

    P.S. All this snow is really making me wish for a cup of hot tea, as LA is SOO cold :)

  2. Tink says:

    Get ya kettle on!

    Happy New Year to man!

  3. Hi Tink,

    Did you check out the Flextras AutoCompleteComboBox?

    http://www.flextras.com/?event=ProductHome&productID=10

    If you did, but thought it didn’t fit your needs, I’d love to find out why.

    We’ve worked hard to make sure that it ‘Just Works”. I noticed your component some issues with closing the drop down via button click, selecting an item using the enter key, and highlighting the filter text while scrolling through the component. I ran into many of the same issues while developing ours.

    I’d love to hear your thoughts, so feel free to contact me privately if that is your preference.

  4. ThaStyle says:

    After the reversed VBox the arowwless scrollbar , the panelstack another creative one dude :D , happy new year and keep them comming :) , would really love to see a canvas or panel implements Ilayout and constraint rows and cols , i would really like to see a component that i could style with a compiled or just norml css file, using height and %… like normal valid css and a nice touch would be to make it possible to show grid lines around those cells :) i tried it but i messed up my sdk :D , basicly what i wanna do is build a grid like editor.. like a post i seen on flexer… u replied to that one so i think that u know what i mean.. thanks bro

  5. Tink says:

    Hey Jeffry

    I wasn’t on the team when a component was original picked but I think they mentioned they had look at it but there was some cost associated with it? In the end they choose the Hillel Coren version.

    When I joined and we went back to it and they didn’t like the way it produced a button like view for selectedItems and it was also over complex for the requirements.

    We took at look at the flextras version and the one thing that cropped up was that the matches are highlighted in bold. This meant that the bold weight of the font used needed to be embedded else the characters didn’t show, or if the TextInput of component was styled to use bold text, the matches couldn’t be seen.

    I also looked at the Adobe one, but some some reason decided to roll out my own as it was really only a matter of filtering the dataProvider and selecting some text (it ended up being a little more work ;) ).

    Thanks for the bugs, I’ve committed a new version which I think resolves.

    ————————————

    ThaStyle, thanks for the kind words.

    “love to see a canvas or panel implements Ilayout and constraint rows and cols”

    I have a TileLayout class that finds the best way to lay out a grid (num or rows, num of columns etc), and resizes all the children to the same size, and fits them into a cell in the grid. That the sort of thing your after?

    “just norml css file, using height and %”

    I wouldn’t muck with the support for CSS I’m quite happy with the way it is. I do have a class that enables parsing of MXML at runtime, including bindings. Gonna strat trying to find the time to push a bit more stuff out on here.

    Got a link to the post on flexer?

  6. Tink,

    Thanks for the feedback. The “highlight” for the Flextras version are completely customizable using an itemRenderer. The default one does use bold. But, there are three separate examples of changing that as part of our Developer Edition Download:

    Here are the samples:

    http://www.flextras.com/AutoCompleteComboBox/Samples/CustomRenderer/#app=9dea&ccaf-selectedIndex=1

    Here is a podcast demonstrating this:

    http://www.flextras.com/blog/index.cfm/2009/6/6/Flextras-Friday-Lunch–Episode-8–03272009

    But, you are right, it is a commercial component; but depending I bet you spent more building your own than you would have had to buy ours.

  7. Tink says:

    I definitely spent more time, rolled into about 1.5 days to get it to its current state.

    I like the way i can change that selection. A limitation I had was that I could only select 1 part of the text, you should definitely implement it in yours so highlight it highlights all matches in the textField as you don’t have that limitation.

    Might even add a couple of styles to mine that default to null, so it uses its current method, but once the styles are set it switches.

  8. ThaStyle says:

    Thanks for the fast reply dude
    Sorry my mistake it was polygeek (http://polygeek.com/1631_flex_dynamically-changing-a-components-constraintrow-and-constraintcolumn)
    yeah that is what i’m after , just by changing the css file changing the layout, the main goal is i am working on 2 sites at the moment basicly they are the same, just one got a vertical menu the other a horizontal
    the contentbox is 100% the menu is fixed acording 2 the buttonskin width.
    Would love 2 see those classes , like in a lot :)
    I was playing with php to kinf of do the same spit raw xml with sql data, but dont wanna invent the wheel again :)
    since ur the styling expert and all, off topic i wanna use the mx stylemanager to load a compiled swf in air.. if the swf is in the sandbox its okay , if its not it gives a i not a module error, i tried some work arounds downloading/saving the file in the output or appstorage, it doesnt mather been banging my head all day , seen a lot of people who say they know, but no luck (using sdk4,2) . i will send u a email with the code dont wanna spammmmm :)
    “ThaStyle, thanks for the kind words.” , i’ve been a programmer for 20 years now, and the sharing kind are getting more and more less, if u read some of the replies on some forums when a source code link is dead while the whole code is in there face, even 2 lazy 2 copy and paste, knowledge is sharing is my way of thinking. and like u dont ever do a thing static twice when u can do it dynamic even if it is also just twice :)

  9. Hillel Coren says:

    Tink,

    Your component looks great!!

    You’re definitely right about mine being somewhat complicated. It took a great deal of extra code/work to be able to support selecting multiple items (which in many use cases isn’t required).

    I hope to add the ability to display the selected items as text (rather than buttons) as I’ve received that request from a number of users.

    Keep up the good work!

    Best,
    Hillel

  10. Tink says:

    kind words mate!

    Keep up the good stuff too, that goes to Jeffry as well.

  11. ThaStyle says:

    Yo , really looking forward for those classes can you email me those please ?? the grid en runtime compilers… can u please o please email me those!
    The Answer to my question above, how to load a compiles css.swf from a server in air
    Is Download the file to the app-storage dir, with a file-object destroy/close that one and use a swfloader not a module loader
    set this one to invisible and use the style with StyleManager.loadStyleDeclarations(mydummyloader.content)
    this seems to be the only work around, this only aplies for remote swf… All other options will give u is not module error

  12. Hey Tink,

    I put together a sample that demonstrates how to make our AutoCompleteComboBox select all instances instead of just the first one:

    Blog Post:

    http://www.flextras.com/blog/index.cfm/2010/1/19/Changing-the-Highlight-of-our-AutoCompleteComboBox

    Sample:
    http://www.flextras.com/AutoCompleteComboBox/Samples/CustomRenderer/

    And source code:
    http://www.flextras.com/AutoCompleteComboBox/Samples/CustomRenderer/srcview/index.html

    It was just a regex change, and I had already documented how to do it in the code.

    These same samples, that demo how to make the AutoComplete highlight without using bold.

  13. Jon says:

    Hey Tink,

    This looks great, thank you! One minor requirement that I have: is it possible to automatically select the first item that is ‘found’? If user is only using keyboard, then they can just tab out of the control (and the value will be automatically selected), instead of having to click the down arrow on their keyboard first, and then tabbing out.

    Btw, Jeffy, I did look at your component: reason I didnt go for it is that I think its over-priced. Even more so considering that there are free alternatives out there. If it was $50 I may have considered it.

  14. Tink says:

    Hi Jon

    I don’t want he component to have this functionality by default, but I have changed the method FilterComboBox.onDropdownDataChange() to protected from private.

    This means you can extend FilterComboBox, override this method and add the functionality you require. The following code should get what you want working…

    protected function onDropdownDataChange( event:FlexEvent ):void
    {
    dropdown.selectedIndex = ( filterString == “” ) ? -1 : 0;
    super. onDropdownDataChange( event );
    }

    I have also added a style named ‘matchedTextStyleName’.

    Within it you can set the selectors ‘color’, ‘fontFamily’, ‘fontSize’, ‘fontWeight’, ‘fontStyle’ & ‘textDecoration’.

    By default this style is null, and the component uses the original way for showing matches (text selection), which is limited to showing the first match only on each item.
    If you set the property, instead the style of all text matches in each item is changed to reflect this. I’ve added this to the example above (you may need to clear your cache).

  15. Jon says:

    Tink, thats awesome, thank you.

    Two other questions if I may:

    1. Is it possible to show all items in the dataProvider when the down button is clicked? Otherwise, the only way for the user to view all options again is to delete the text that has already been entered.

    2. If the dropdown is open, and you click the down button again, then the dropdown list closes and reopens straightaway. It should remain closed.

  16. Hi Jon,

    Thanks for taking a look and the feedback. When you buy from us, what you’re really paying for is support; which some companies are interested in getting that.

    How long have you spent trying to get one of the alternatives up and running? Compare that w/ your hourly rate and you’ll find that ours is not that expensive.

    That said,
    Automatically selecting the first item found is not consistent with the way that other AutoComplete’s work (Please show me otherwise if you know of one).

    However, if the user types in something exactly as it is in the drop down; our AutoComplete can be selected if the selectOnEqual property is true (
    http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox/AutoCompleteComboBox.html#autoCompleteSelectOnEqual )

    Wouldn’t showing all items in the dataProvider would defeat the purpose of using an AutoComplete component in the first place?

    However, if you’re using the Flextras AutoCompleteComboBox you can cancel the list filtering event, and therefore the drop down will not be filtered (This is the event: http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox/AutoCompleteComboBox.html#event:autoCompleteDataProviderFilterBegin )

    In the Flextras AutoComplete, if the drop down is closed using the down arrow button; it will stay closed until you click the button to open it again, or type in new text. It does seem to be unexpected behavior in Tink’s embedded sample. I spent ~2 weeks dealing with bugs where the drop down wouldn’t open or close properly. There are a bunch of fringe cases if memory serves me.

  17. Tink says:

    Hi Jon

    1. If there is text in the TextInput then the data will be filtered.
    2. I’ve fixed this, along with an issue i found with the highlight style getting removed on mouse over/out.

    I also added a Boolean property names ‘selectSingleMatch’ which defaults to false. when set to true, if only one match its found it will be auto selected.

  18. Jon says:

    Thanks Tink.

    To answer Jeffry and yourself: if the user has chosen an item, and then needs to change it to something else, then in its current implementation he needs to delete the text. At this point, the control has ceased to function as a combobox.

    In my mind, the component is first and foremost a combobox – the type ahead facility is only to help the user choose an option faster (especially in a dataprovider with a large number of entries).

    I’m not saying that this is how it should be, but thats what my requirements are. I guess thats always the tough part of those components: everyone has a slightly different requirement :)

    I will have a dig into the code and see if I can come up with anything.

  19. Tink says:

    “To answer Jeffry and yourself: if the user has chosen an item, and then needs to change it to something else, then in its current implementation he needs to delete the text.”

    Thats correct. The theory is, if there is some text in the TextInput, it is used to filter the content.

    How would the component know when to use the text in the TextInput as a filter, and when not to use it as a filter?

  20. Jon says:

    Tink,

    The concept is that the filter should not used when the user clicks the down arrow button to the right of the combo i.e. it should act like a ‘normal’ combobox at this point.

    Ive uploaded a video of what I am trying to get to; hopefully this will give you a better idea: http://www.youtube.com/watch?v=UebGoRCGlC4

  21. John,

    What application is that from?

  22. i try ,but have a problem, when the FilterComboBox is in bottom of the application, the _dropdown is wrong ,
    sample:

  23. Jon says:

    Jeffry, sorry, but I’d rather not say.

    You probably noticed this anyway, buts its not a flex/flash app and in that implementation its being used as an itemrenderer (inside a datagrid).

  24. Tink says:

    Jon I’ve added a ‘removeFilterOnSelection’.

    When the dropdown closes, if an item is selected the filter will be cleared. As soons as you type or delete a letter in the TextInput the filter is immediately re-applied.

  25. Tink says:

    @songhuan in china

    Got any more info on the problem mate?

  26. Tink says:

    Thank you songhuan

    I’ll get this sorted some time today.

  27. Tink says:

    Hi songhuan

    I’ve just committed a new version which should address the bug.

  28. songhuanren says:

    thanks, the problem is fixed

  29. jones says:

    Hi Tink,
    Do you have any idea how difficult it would be for me to extend this to enable remote filtering?
    In other words, I don’t want to load all the data on the client… just as the user types and stops, a query is sent to the server and the results are displayed in your dropdown.
    I’m sure it would involve some hacking on my part, but maybe you have some ideas for me on the level of effort that would be involved?
    Thanks!

  30. Tink says:

    Hi jones

    Not sure you’d need to extend this, as the main functionality here is the filtering, yet you would already return filtered results? Thefore couldn’t u use a standard ComboBox, and after so many characters are entering request your data from the server?

    I guess if you then wanted that data to be filter as they continue to type extending this class could be useful.

    If that was the case, listen for the user entering characters, when a certain number have ben entered, get you data, assign it to the dataProvider and apply the filter.

  31. Tink,

    A lot of display issues can crop up when using the approach you describe, If memory serves me, they relate to when the drop down was already open.

    Jones,

    We’ve already done the work for you. Take a look at the Flextras AutoCompleteComboBox and our AutoCompleteRemoteData property ( http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox/AutoCompleteComboBox.html#autoCompleteRemoteData ). It automagically solves the display issues when you replace the dataProvider.

    Here is our sample that pulls data from the remote database after each keypress:
    http://www.flextras.com/AutoCompleteComboBox/Samples/DBFilter/#app=3975&c8f9-selectedIndex=1

  32. Tink says:

    “A lot of display issues can crop up when using the approach you describe, If memory serves me, they relate to when the drop down was already open.”

    I’ve not looked at your source but I think you extend ComboBox which means that probs that cropped up for you may be diff for this implementation. That said I haven’t tested it so I don’t know.

    If you have a crack at it Jones using FilterComboBox, and you have any probs specific to it, throw the code up somewhere and I will try and address them for you as with the points above.

  33. Tink,

    Very valid point. The Flextras component does extend the ComboBox. And if your component doesn’t, it may not have some of the issues I had.

    I haven’t reviewed your source either; I had assumed you were also extending the ComboBox. ;) My bad!

  34. Tink says:

    I went with ComboBase due to ComboBox being littered with private methods and props that I couldn’t override.

  35. Ravi says:

    Hi Tink,
    Awesome work, thanks!

    I could not figure out how to allow entries that do not match anything on the dropdown list. In your example, if you type in ‘ActivityEvent111′ and focus out of the combobox, the text reverts to ‘Type to filter’. Please advice.

  36. Tink says:

    @ Ravi

    I’ve just pushed up a couple of updates, one included the addition or a property named ‘clearInputOnFocusOut’. This is et to true by default and will clear the InputText if no selection is made when focus is removed from the component. If you set this to false, you text will remain.

    @ jones

    I’ve tested it (changing the dataProvider), and did a test case where I extended FilterComboBox to fit your needs and it seemed to work fine.

    Here’s the code

    package
    {

    import flash.events.Event;
    import mx.core.mx_internal;
    import ws.tink.mx.controls.FilterComboBox;

    use namespace mx_internal;

    [Event(name="getRemoteData", type="flash.events.Event")]

    public class RemoteDataFilterComboBox extends FilterComboBox
    {

    private var _showingDropdown : Boolean;

    public function RemoteDataFilterComboBox()
    {
    super();

    clearInputOnFocusOut = false;
    }

    override public function set dataProvider(value:Object):void
    {
    _showingDropdown = isShowingDropdown;

    super.dataProvider = value;
    }

    override public function set filterString( value:String ):void
    {
    super.filterString = value;

    if( filterString.length == 4 ) dispatchEvent( new Event( “getRemoteData” ) );
    }

    override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
    {
    super.updateDisplayList( unscaledWidth, unscaledHeight );
    textInput.getTextField().setSelection( textInput.text.length, textInput.text.length );

    if( _showingDropdown )
    {
    _showingDropdown = false;
    open();
    }
    }
    }
    }

    When the text entered is 4 characters long the component dispatches an event (you’ll probably want to create a custom event for this instead of the String used above). You can then catch this event, go off and get your data depending on the 4 characters, the assign that to the dataProvider property.

    Hope it makes sense.

  37. Ravi says:

    Thanks, Tink, works like a charm!

  38. jones says:

    Thanks so much Tink. I will try this out soon!!

  39. masfaithea says:

    Great jobs Tink, but I’m a newbie in Flex and I got problems when try to test your component in Flex Builder. Could you mind giving me some package of files or examples for me so I can use it to be tested in Flex Builder????

    Thanks before

  40. Tink says:

    If you right click on the example above you can view the source.

    You then just need to check out the source code from the google code library.

  41. masfaithea says:

    Thanks for your reply, but I still have problem to test it. I have downloaded files from it source code and actionscript file from google code. But I still confuse to use it. How to create SWC file from that actionscript file?

  42. Chuck says:

    Hello Tink.

    Nice job on this. Thanks for sharing it. One question. If you want to load initial selection what property should you use? If loaded into filterString when you click on it it only shows that one (which makes sense). I want it to act like an selecteditem. Is this possible?

    Thanks, Chuck

  43. Tink says:

    Hi Chuck

    This is a bug.

    With ‘removeFilterOnSelection’ set to true you should be able to select an index or item and the full list should still show.

    I’ll look into it.

  44. Tink says:

    Hey Chuck

    This should now be fixed and has been committed.

  45. Chuck says:

    Hey Tink,

    I downloaded the latest and it works great. Thank you so much. Chuck

  46. pintaf says:

    Hello tink.

    Thank you for sharing this beautiful component.
    I have done some modifications that made this component very close that I expected.
    But I have a little problem I don’t success to solve :

    The scrolling(with the wheel) in the drop down isn’t working.
    Is there a proprieties to modify ? (I see it’s working in the one you show on the top of the page).

    I hope my English is understandable.
    Regards, Pintaf

  47. Ali Raza says:

    Hi Tink,
    Google Code’s download section is empty and i couldnt even find the code for this component in Flex’s view source.
    Could you please provide the downlod link?

    • Tink says:

      Hi Ali

      You need to checkout the source from the google code SVN.

      pintaff

      Without seeing what you’ve changed its impossible for me to say. Im also mainly on OS X so don’t get scroll wheel support.

  48. pintaf says:

    Ok. Thanks for the reply.
    I’ll try again to find what is going wrong.
    I have my little idea.

    For Ali Raza: http://tink.googlecode.com/svn/trunk/ws/tink/mx/controls/

  49. Ali Raza says:

    @Tink, Pinta,
    Thanks :)

  50. Omar says:

    I found it very helpfull, Thanks a lot!

  51. Chuck says:

    Hello Tink,

    Is there a way to disable selection of item in the list? When I set enabled=false, it does not allow one to select an item with the keyboard but does with the mouse.

    Thanks, Chuck

  52. Adam says:

    Hey Tink,

    First off – love the FilterComboBox!

    I am trying to upgrade my app to Flex 4, but I am getting an error when the compiler hits the FilterComboBox:

    [mxmlc] /development/workspace/myapp/build/swf/ws/tink/mx/controls/FilterComboBox.as(1653): col: 17 Error: Call to a possibly undefined method getTextField through a reference with static type mx.core:ITextInput.
    [mxmlc] textInput.getTextField().setSelection(textInput.text.length, textInput.text.length);

    I am using an Ant build script that points to the Flex 4 SDK. Most other modules are compiling fine this way (after re-instating the Halo theme etc.).

    It is not immediately apparent to me what to do next… the textInput variable comes from the underlying ComboBase.as…

    Should FilterComboBox extend a different class to be compatible with Flex 4?

    I am happy to spend a bit of time on this to the extent of my abilities, but would appreciate some pointers…

    Thanks,

    Adam

  53. Adam says:

    Hi Tink,

    Further investigation shows that Adobe have apparently changed the underlying implementation of ComboBase.as.

    I have made some changes that make it compile and work in Flex 4. From line 1650 in FilterComboBox.as:

    if (editable)
    {
    if (disableSelection) {
    textInput.selectRange(textInput.text.length, textInput.text.length);
    } else {
    textInput.selectRange(0, textInput.text.length);
    }
    textInput.horizontalScrollPosition = 0;
    }

    There are some warnings regarding using deprecated methods relating to styles:

    /ws/tink/mx/controls/FilterComboBox.as(2593): col: 49 Warning: ‘getStyleDeclaration’ has been deprecated since 4.0. Please use ‘IStyleManager2.getStyleDeclaration on a style manager instance’.
    var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration( defaultStyleName );

    I don’t have my head around the styles stuff at all, so I won’t attemp to fix this.

    Hope this is of use.

    Cheers,

    Adam

  54. sandy says:

    Hey Tink,
    Just awesome work….Thanks.
    I am using Flex 4 and have few thing with this component , please let me know how that can be done
    1. I am unable to get the arrow in combobox . It just looks text input but if I click on it, shows me drop down (I have removed “Type to filter” prompt and the list has other element assigned on init)

    2. Is it possible to select the first item in the list I mean say we have list of
    Tim
    Tin
    Tik
    So if I type “Ti” and do not press arrow or enter key(I am not selecting anything) and just press tab then it should select the “Tim” which is the first one in the list.
    I hope you understand what I mean . This is how the editors work.
    Please let me know how this can be done.
    Your help is highly appreciated.
    Thanks,
    Sandy

  55. Tink says:

    Hi sandy

    1. Try setting the style buttonWidth to somethng bigger than 0.
    2. See my comment above made on February 4, 2010 at 12:05 am

    I’ll sort a spark version sometime soon.

  56. sandy says:

    Tink,

    Thanks for instant reply.
    Now I am able to show the button by increasing the width but arrow is missing which is weird …..

    Please let me know if their is any property or something which I am missing.
    Thanks,
    Sandy

  57. FlowX says:

    hey Tink,
    I’m using your FilterComboBox and i really like it but i have one problem:
    the editable attribute does not work… That’s my usage:

    myFilterComboBox = new FilterComboBox();
    myFilterComboBox.editable= true;

    Can you help me with this problem?!

  58. LaNenet says:

    Hi Tink,

    Great product. Thank you very much for sharing your product.
    I am a beginner/Intermediate Flex developper.

    I have 2 problems:

    1/ the filtercombox does not appear in design mode in Flex Builder 3 ?

    2/ when I select an item in the filtered dropdown list, the dropdown list appears at the top of the combobox with the selected item, whereas it does not appear if I select the item from the dropdown list triggered by the right button. I set the flag removeFilterOnSelection to true.

    Can you help me with this ?

  59. Tink says:

    Hi LaNenet

    I’m not sure I understand the issue your having on point 2. Can you show me an example of what you mean?

  60. LaNenet says:

    Hi Tink,

    have a look at :
    http://www.labcomm.fr/demo/crfscan/html/ZZ_FilterComboBox2.html

    if you type “err” then select an item by a mouse click it is ok.
    if you type “err” then select an item by enter, you get this ghost droplist as if the selection was called again.

    I used your exact code for the mxml.
    I took the As files : StyleUtils.as and FileterComboBox.as from :
    http://code.google.com/p/tink/source/browse/trunk/ws/tink/mx/controls/

    Any idea?

  61. DreamingSun says:

    Hey LaMenet,

    You can get the control to show up in design mode if you follow the steps outlined by Adobe in this video. I had this same problem and this fixed it.
    Essentially, need to put the component in a swc.

    Custom Components Live Preview (Design Mode)
    http://www.youtube.com/watch?v=v06NIDDSYag

    Tink,
    Thanks for making this component available. I’m new to Flex and this would have taken forever to figure out.

  62. LaNenet says:

    Hello DreamingSun,

    Thank u very much for the advice. The control shows up in design mode when using a swc. However, is there a more direct way to make the control showing up?

    Tink,

    It seems that using the swc solves my second point which is unexpected??
    Did u have time to investigate?

    LaNenet

  63. Aurelian says:

    Hi, great component indeed!

    I wanted to use it into one of my personal projects, but then i figured that i don’t really know how to configure it to allow new values as well.

    Right now, it seems that if i enter a value that is not already in the list, it will revert back to the prompt.

    I think i could use the change event to remember all the changes of the text property and then the close event to figure out if the user entered a new value or not, but it seems a little bit far fetched.

    So, my question is.. is it possible for the component to accept new values?

    thank you (:

    • Tink says:

      HI Aurelian

      At the moment there is no way for the component to accept the values but it sounds perfectly feasible to make the change as you described.

  64. Aurelian,

    A few people have asked for a similar feature with the Flextras AutoCompleteComboBox. They want new values to automatically be added to the dataProvider. The question I always ask is how does the component know when the user wants to add a new value; compared to them making a typo or not having finished typing yet?

    I believe that some form of user interaction is the only way to tell whether or not the user really typed a new value or not. The one client I’m aware of who implemented this had a “save as new value” button external to the component.

  65. Aurelian says:

    Hi Jeffry,

    Well, i believe there are multiple ways of figuring out what the user actually wants that should work for (at least) 99% of the user cases.

    It’s obvious that you can’t decide that you have a new value (or not) until the component looses focus, at least. So that should fix the “still typing” issue that you mentioned.

    Now, it is true that some users might click somewhere else or press Tab accidentally while typing so this might result in a lot of unwanted new values. I believe this can be overcome by saving the value only once data inside the form(that contains the autocomplete component as well) is submitted, because then you will assume that the user checked all the data before submitting it.. Of course, i assume the component is not the only one inside the form. In case you only have the autocomplete component and nothing else.. you can just use the first method that i suggested above.

    Another issue that you mentioned was the possibility that the user can make a typo… Now, i personally believe this will not happen in most(all) of the cases because: if the user has an autocomplete box that has the list component in place as well, it will only type the first few letters and then use the keyboard/mouse to select the correct value.

    Further more, for specific scenarios, this can be taken to the next level and you could have some algorithm that can figure out if the value that the user entered is similar to a value already present in the dataProvider and warn the user(with a label somewhere, or with an Alert, depending on the situation/importance).

    Once again, it pretty much depends on the situation, but i do believe that everything can be overcome.. for example you could add the possibility to remove unwanted values from the data provider, or actually use a smart filter that will cause the values that you/other users select more often to appear first and the others, last.

    Hope this answers your question.

    • Tink says:

      I could see this functionality being used in many places the most popular i guess would be where you enter an address. The app could save this address to let interface prompt the user, but its also perfectly feasible for the use to enter new content.

  66. Aurelian says:

    Tink,

    Thank you very much for your answer. I will give it a try and see if this works.

  67. Jon says:

    I’ve found that the best way to handle if user types in a value that is not in the dataprovider is to ask if they want to add it when the control loses focus.

    “Item ABC is not current a product. Would you like to add it as a new product?”

    or something similar…

  68. Jon,

    I think that is a great approach; although probably not something I’d want to build into the base UI of a component, but rather provide the relevant events for developer’s to hook into to make that happen.

    Aurelian,

    When building application specific components, you often make fairly specific use case assumptions about how he app is going to be used. A lot of your suggestions would work in that case. In terms of building flexible components similar to what you might find in the Flex Framework; I believe a lot of your suggestions make too many assumptions to be flexible.

    In Thunderbird, my primary mail client; if I type an unknown entry into the “to” field it is not saved in the address book until I send the e-mail; which has nothing to do with focus on ‘autocomplete’. So, as a component developer, I would not be prepared to assume that focus is always the key motivating factor for adding new items.

    I also wouldn’t want to assume that when the component loses focus it means the user finished typing. What if the user switched windows to answer an instant message or to answer a call on Skype or to change the song playing on their media player? All those situations would cause the component to lose focus but may not mean the user is done typing. What if someone came over the user’s cubicle and they spoke just long enough for the user’s computer to go into sleep mode? That’s another focus loss.

    If you don’t think your users will ever make typos; I wish I had half the competency of your users. I can easily envision a situation where the user types the start of a product model number “10A” instead of “10-A” then wonders why it’s not showing up and switches to another browser screen [or other resource] in order to verify the model number. One of my past consulting clients formatted product model numbers differently in their print catalog, their website, and their internal ERP system. They were all similar, but different. [As best I understood; they're were some legacy / political issues at play].

    My point is that there are a lot of variables to such a thing, and a lot of assumptions need to be made for an implementation. I feel that flexible components are the ones that make the least number of assumptions about their intended use and am not sure if a flexible implementation of this would be practical. However, if you need to implement something like this the Flextras component has all the event hooks you need to do so. ( I suspect so does Tink’s implementation and Hillel’s too; although I am not intimately familiar w/ their APIs ).

    You mentioned algorithms to discern commonly used options. I don’t see a way to build something like that without access to a backend and storing data across multiple sessions. The purpose of Flextras Components is to have no backend dependencies. You’d Flip if you discovered that a new Flex Framework Component had features that only worked if you were using Java and a specific database table structure that Adobe defined.

    Adding an algorithm for finding items similar to what the user typed is a neat idea and I might be able to rationalize adding it to the API. However, I’m not sure if I would include visual elements to such an API. It would just throw events for the developer to handle in whatever way they see fit.

  69. anon says:

    did you take down the filtercombobox from the google source code?

  70. Batuta says:

    Hi Tink,

    I think this component would be helpful.

    Would you be able to simply include the whole components needed when right click on the application and select view source? Instead of getting it from google code where you have to wade through the folders inside it.

    Thanks.

    More power!

    Batuta

  71. steveb says:

    I’d like to use this in a project. I can get it working in mx, but not in sparc. I see the ‘Type to filter’ string, but nothing else of the combo-box. If I select the string, I sometimes get the dropdown list – but it has to be a fairly accurate hit on the invisible left border.
    Am I missing the obvious- or do I need to wait for a sparc version?

    • Tink says:

      I haven’t tried implementing it in spark, I’ll try and find some time to take a look, although I will be adding a spark version to the library at some point.

      It may be that if I make changes so that it works in flex 4 it won’t work in 3, in which case I will leave it as is and just concentrate on a new one specific for spark.

  72. steveb says:

    Thanks Tink, that’s great. I’ll watch this space… and I’ll spell Spark correctly in future.

  73. The Flextras AutoCompleteComboBox works in Flex 4; although it is not a native Spark Version. That’ll will come from us sometime too.

  74. LaNenet says:

    Hello Tink,

    I have this bug that I mentionned on the 20th may (ghost value). Did you have time to investigate ?
    You answered it was a defo bug???

    Tnak u in advance and sorry to persist, but I reallly like to use your component.

  75. Praks says:

    Hi Tink,

    I am trying to use this component in my app. But have the below issue:
    I have placed this component on the top left of the screen just below the menu
    The list opens up sometimes on top of the control or below and is not consistent.
    Also as there is not much space above the control, the list is not shown entirely (say rowcount = 10) when opened up whereas if opened downwards its displayed properly
    I am using your mx control for flex 4. Could you please help

    Thanks

  76. Lucas Jones says:

    Hi Tink.

    There is a small bug on the component when it´s disabled.

    If you click over the component in disable state, it will open the dropbox and you will be able to select an item from the list.

    I solved the issue by placing the code below in the fist line of the displayDropdown method.

    if(!enabled) return;

    Cheers

    Thanks for sharring the component.

  77. Tink says:

    Hi Praks

    If you make me a simple example of the bug and upload it enabling view source I try and take a look at it.

    Thanks Lucas!

    I’ve made the changes to the flex 3 and flex 4 components and commit to the repo. Appreciate you looking into it!

  78. Tink says:

    Thanks Prakash

    I didn’t realize it was so broken as I had only made sure it compiled for Flex 4 (i do have a spark version but i need to get round to tidying it up before open sourcing it).

    It seems the list wasn’t being redrawn when the scrollRect was set to null (although ive tested this outside the component and it seems to work fine), so I’ve put in a bit of a fix which isn’t great but seems to work. I’ve committed it to the flex4_mx code.

    • Praks says:

      Thats cool Tink. I took the latest and it works fine now :)
      I had to set the editableSkin to ComboBoxArrowSkin class (as thats not set by default for the ComboBase class), to make the down arrow visible on the dropdown button.
      Many thanks for your timely help!

    • Sethu says:

      Hi Tink,

      I am trying to use this component in my AIR app. But I also face the same issue as Praks has mentioned in one of his posts. The list opens up sometimes and down sometimes which is not consistent. I am using your mx control for flex 4. Could you please help

      Thanks

  79. Dave says:

    Hi,

    I set an ArrayCollection to the dataProvider. Works great showing the data and also the autoComplete but once I select something the FilterComboBox shows ‘Type to Filter’ instead of the selectedLabel or selectedItem. I am using tink_flex3_mx.swc lib.

    Thanks a lot, big fan!

  80. Lucas Jones says:

    Hey Tink.

    How can I make the FilterComboBox editable??

    Basically, I´m trying to use it as a AutoComplete.
    I have set the property editable=”true”, but every time I write something that is not in the dataProvider list, the text is cleared as I focus out.

    Any ideas?

    Cheers

  81. alex says:

    Great work guys,

    Thanks a lot for sharing. Would be great if you could change the scope of filterDataFunction from private to protected.

    Thanks again!

    • alex says:

      Davide already created an issue at google code regarding that topic. I’ve posted a more detailed comment there.

      Cheers,
      Alex

  82. Booshitha says:

    Thanks for this component. It works great. The combobox arrow isnt getting displayed when I deploy the Flex application in Portal. I couldn’t find the cause. Any help is appreciated!

    • Praks says:

      In case you are still stuck with it, please refer to my post dated December 23, 2010 at 9:37 am above – might be of help

  83. Joe says:

    Hi Tink,

    We’re using your FilterComboBox in a flex 4.5 project and seeing the same upwards list that Praks is seeing in his “December 21, 2010 at 10:10 pm” post and as seen on his link: http://www.praks84.webs.com/flexdemo/FilterTest.html

    I’m a little confused as it seems there might have been two problems associated with Praks post?: the list displaying upwards and the arrow not displaying.

    Was/is there a fix for the upwards list that I missed?

    Thanks,
    Joe

    • Tink says:

      Hi Joe

      I believe it was fixed but haven’t tested it in 4.5, instead concentrating on a spark version, which isn’t currently open source.

  84. David says:

    Tink,

    the source repo has a lot of files that are not directly related to this component. if i want to play with the source, what are the files related to this filtercomobx. could you please list them?

    Thanks.

  85. Joe Schmo says:

    When I try this component using SDK 4.1 it works fine–except that when you have something selected already, and click the dropdown button to change the selection, it only lists the item that is currently selected. I’m using the Flex 4 mx swc component. Does this component work in SDK 4.1?

  86. Carlos Eduardo says:

    guys, I have an urgent question and I love this component and therefore would love to use it in a project. If you type something in the combobox is not found in the dataProvider that it allows the text is fixed in the text imput and is not deleted as it is today.

    Please help-me.

    • Tink says:

      Unfortunately thats not how this component is built to work. If its not in the list, the text enter will be removed when focus is lost. You could obviously edit the code to get the functionality you require.

  87. Carlos Eduardo says:

    Hello everybody,

    I really need your help, I’m from Brazil and I’m using this component in an application, but he’s very good with the data from the database, but I like to write, and if it is not on the list what I wrote could be fixed and not be deleted automatically when it loses focus, how can I configure this?

  88. Carlos Eduardo says:

    Ok, where do I modify the code to get the result I need? Which line do I change?

    • Tink says:

      I very much doubt that this would be a single line change.

      You’ll need to find where the code checks whether a match is found, then if not instead of removing the entered text, create a new item in the dataProvider that has and property with the same name that your using for the rest of the labels, and add your text to that.

      Or a better solution would be to add a newItemFunction, that you can pass a function to, then when a new item is added the component can invoke this function passing the text as a parameter. The function should then return an object to insert into the dataProvider. This means that you can return an item of the correct type, as you wouldn’t want to hard code this type into the component itself.

  89. abe says:

    The popup keeps directing up. Is there a way to force it to popup downwards?

    • Tink says:

      I recently spent a decent amount of time and done some extensive work on this component, and the work does address this problem along with many of the other requests in the comments, still not sure if I’ll open source the work at the moment. Maybe you guys can convince me?

  90. abhigo says:

    Awesome! work Tink. I was wondering if there is a possibility to select multiple items through checkboxes from this filter combobox component?

    • Tink says:

      Hi abhigo

      At the moment the FilterComboBox doesn’t support multiple selection. It’s possible, but would require some thinking about the approach to take.

  91. Francois says:

    I’ve been using this filter combobox on a project for a while, everything works perfectly. I want to transfer my program to another server, but on the new server, I’m getting this error :

    (mx.events::InterManagerRequest class not found) :

    VerifyError: Error #1014: La classe mx.events::InterManagerRequest est introuvable.

    at ws.tink.mx.controls::FilterComboBox/downArrowButton_buttonDownHandler()[/Users/tinktink/Documents/tink/libraries/Tink Google Code/flex3/src/ws/tink/mx/controls/FilterComboBox.as:2225]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9156]
    at mx.controls::Button/http://www.adobe.com/2006/flex/mx/internal::buttonPressed()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\controls\Button.as:2498]
    at mx.controls::Button/mouseDownHandler()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\controls\Button.as:2744]

    I’m not sure why this is happening, since it’s the same Flex version, same code and librairies. The only difference is the server and coldfusion version. I’m using the tink_flex3_mx.swc

    Any idea where I can fix that ?

    Thanks,
    Francois

  92. Catherine says:

    Awesome work Tink… Thank you, it works great!

  93. Dhana says:

    I couldn’t find the FilterComboBox component in the “view source” option. Even the link to “http://code.google.com/p/tink/source/browse/trunk/ws/tink/mx/controls/FilterComboBox.as” is not working. Please let me know how can I get your code

  94. Dan says:

    Found a small “problem” when you use the code directly and not the compiled library.
    There was also a post or two about this above.
    Because we have a custom library that is referenced by all, the technique to add new items is to add them as source, which I did with the FilterComboBox.
    When rendering the FilterComboBox, all that would show on the screen is text over a background that is the same color as the background. Clicking on the text would open the drop down, but you would see no down arrow, border, etc. It was just a list opened in place.
    Adding one or two styles changed the behavior to a white background. Still the control would not auto-resize to longest field, have no arrow, border, etc.
    After a bit of digging (cause thats what I do), I found the default css you are using to build the library. I copied these values into the project css, and now everything is working as expected. To save others the hardship of having this problem with the source, here is the css:
    FilterComboBox
    {
    arrow-button-width : 22;
    corner-radius : 5;
    disabled-icon-color : #919999;
    dropdown-style-name : “comboDropdown”;
    font-weight : “bold”;
    leading : 0;
    padding-left : 5;
    padding-right : 5;
    skin : ClassReference( “mx.skins.halo.ComboBoxArrowSkin” );
    matched-text-style-name : matchTextStyle;
    }

    .matchTextStyle
    {
    font-weight: bold;
    color: #FF0000;
    }

    I think the underlying problem overall is the reference to the skin. Without this reference, you just get a box like I was seeing.

    Hope this helps someone.

Leave a Reply