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
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?
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.
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/
@Tink, Pinta,
Thanks
I found it very helpfull, Thanks a lot!
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
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
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
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
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.
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
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?!
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 ?
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?
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?
I see it, thats a defo bug, leave it with me.
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.
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
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 (:
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.
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.
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,
Thank you very much for your answer. I will give it a try and see if this works.
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…
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.
did you take down the filtercombobox from the google source code?
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.
no anon its still there
http://code.google.com/p/tink/source/browse/trunk/ws/tink/mx/controls/FilterComboBox.as
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
Hi Batuta
I leave it all on google code so that you get the most up-to-date version
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?
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.
Thanks Tink, that’s great. I’ll watch this space… and I’ll spell Spark correctly in future.
The Flextras AutoCompleteComboBox works in Flex 4; although it is not a native Spark Version. That’ll will come from us sometime too.
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.