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.
The source for FilterComboBox can be downloaded from our Google Code repository.
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
Get ya kettle on!
Happy New Year to man!
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.
After the reversed VBox the arowwless scrollbar , the panelstack another creative one dude
, 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 
, 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
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?
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.
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.
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
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
kind words mate!
Keep up the good stuff too, that goes to Jeffry as well.
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
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.
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.
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).
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.
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.
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.
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.
“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?
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
John,
What application is that from?
i try ,but have a problem, when the FilterComboBox is in bottom of the application, the _dropdown is wrong ,
sample:
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).
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.
@songhuan in china
Got any more info on the problem mate?
ok, sample:
http://www.sandy1219.com/test/FilterComboBox/tink_test.html,
input “B”
Thank you songhuan
I’ll get this sorted some time today.
Hi songhuan
I’ve just committed a new version which should address the bug.
thanks, the problem is fixed
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!
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.
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
“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.
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!
I went with ComboBase due to ComboBox being littered with private methods and props that I couldn’t override.
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.
@ 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.
Thanks, Tink, works like a charm!
Thanks so much Tink. I will try this out soon!!
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
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.
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?
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
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.
Hey Chuck
This should now be fixed and has been committed.
Hey Tink,
I downloaded the latest and it works great. Thank you so much. Chuck
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