This component does not fully support Flex 4.5 and above. I’m leaving this page up as the component/code may be useful to some developers but I’m no longer actively supporting it.
Advanced Flex AutoComplete component which supports browsing, selecting and ordering multiple items.
Important Info
- License: The component is freeware. You’re welcome to use it anyway you’d like, I just ask that you send back any bug fixes or improvements.
- Support: I try as hard as possible to respond to all questions within a day. I’ve been using the component for a while now and am pretty confident that it works well. If you’d like to extend it I’m happy to work with you to get your feature working.
Version History
- 1.2 released on August 4th, 2011
- 1.1 released on October 25th, 2010
- 1.0 released on July 3rd, 2009
- 0.98.2 released on May 11th, 2009
- 0.98.1 released on April 7th, 2009
- 0.98 released on March 12th 2009
- 0.93 released on February 1st, 2009
- 0.91 released on January 1st, 2009
- 0.90 released on November 10, 2008
Other Options
A single solution usually doesn’t work for everyone. Here are some other excellent Flex Autocomplete components which may better fit your needs.
- Flextras AutoCompleteComboBox – comes with support
- Tink’s FilterComboBox – more lightweight
- Flashcommander’s Flex 4 AutoComplete – uses Spark
Hillel Coren 
Hi,
This is a wonderful component. I have a small issue using it. Please advice.
When autocomplete is set to allowMultipleSelection=”true” and selectedItemStyleName=”underline”. The selected item will be displayed with underline as expected. But it also has an extra ‘,’ following each item. Where is this ‘,’ come from? how can I not show this extra ‘,’? Any code workaround?
Thank you.
-Bo
Bo
Currently, the component doesn’t support specifying the delimiter (I hope to add this feature in a future release). For now, you can use the source code and change “,” to “;”.
Here’s another comment I posted which specifies the locations where you’ll need to make changes. http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-673.
Best,
Hillel
Hi, Can you please let me know how you have implemented the underline functionality for the search string? I am trying to implement the same with richText spark component.
Rathy,
I used a Label as an item renderer, used the htmlText property and then used <u> tags to show the underline. You can see this in the DropDownItemRenderer.mxml class.
Have you thought of implementing fuzzy search? Or approximate string matching search, so that even if the user has a typo the suggestions will still contain what the user is potentially looking for. I am trying to do this for gene lists! and the names are often weird and difficult, so this component can greatly help. Do let me know if you know an easy way of populating the list with approximate matches too, much like google!
Vishal,
That’s an interesting idea, you’d probably want to use something like soundex.
I found this post which has an example http://jobemakar.blogspot.com/2007/08/soundex-comparing-words-phonectically.html
That’s a great component. I love it. Thanks a lot for sharing, it is greatly appreciated!
Mathieu,
Thanks for the kind words
Best,
Hillel
Good component.
If someone interested I made web-services wrapper for Autocomplete component. Can be used for selection items from database. It extends dynamic data example.
http://rapidshare.com/files/342607642/autocompleteWS.rar.html
I have a question. I want to do a little more… by clicking BrowseIcon near ClearIcon. Is there any way to do it?
It will work as follows: call web services that popolate ListDataPrivider, but with all items in dictinary.
Maxim,
I’m sorry, I’m not sure that I’m following what you’re trying to do. Could you please try explaining it another way.
Thanks,
Hillel
Ok, Ill try…
When user types symbols inside Autocomplete component I call web service and it returns max 10 items from database dictionary depending on searchtext. It works well. I need a way to display all items, when user manually selecting item from list. I planned add Browse button Inside AutoComplete Component, and write a trigger when it clicked. I like the way ClearButton works. Just need another one.
Thanks, Maxim
Maxim,
Check out the InlineButton section at the end of the documentation. It has an example to use a button to show all of the items.
Hope this helps,
Hillel
Yes, it is what I needed.
Here is class example which extends AutoComplete.
1. When User types search text it calls Web Service BasetypeSearch method. It returns first 10 items from dictionary.
2. When User click InlineButton it calls Web Service BasetypeSelect method. It returns all records or first 1000 depending of basetype property.
3. InternalValue and FormValue properties are used to read result of Selection.
4. Antispam feature prevents spam of database searches when user changes searchstring faster than result returns. (2 methods – 0.5seconds request delay + block ing request while waiting answer).
5. EditMode properties = true for cases when user types any text (=TextInput Class), but can select predifined items from dictionary.
6. Web services text example and component use example included.
http://www.filehosting.org/file/details/120362/autocomplete-ws.rar
Maxim
Hi, is there a way to filter out spaces and commas?
for example enter in three spaces and a comma,
What you will end up with is 2 entries, one with three spaces, another with a comma, and the refreshed display only shows one comma.
Also entering: one,two,three,
results in four items in selectedItems:
one
,two
,three
,
even though the display shows: one two three ,
Thanks!
great component.
Steve,
I’ll make this change in the next release. For now, you could use the source and add the following to the handleFlowBoxChange function in AutoComplete.mxml just inside the for loop for the parts array.
searchStr = StringUtil.trim( searchStr );
if (!searchStr)
{
continue;
}
Hi Hillel,
Great component, I am trying to use it for my web app and I am kinda wondering how I can enable searching multiple fields. That is, currently the labelField defines which field in the array collection to search. Can I search multiple fields? And perhaps sort the results in the autocomplete based on fields, say put a match on name higher than a match on address?
Thanks.
Vishal,
Check out this comment http://hillelcoren.com/flex-autocomplete/#comment-1141
Best,
Hillel
Hi Hillel, and first of all thanks a lot for this awesome component. I’ve been looking for such a component for years and it works exactly as I would expect, with even more customization I dreamt of. Thanks a lot for making this component and offering it for free when so many components with much less functionality are expensive.
I’m just having one small issue, that is not blocking me but just a little disturbing. I’m using your Flex 4 beta version, and when I put an Autocomplete in a form, when I go from one field to another using the “tab” key, it seems like focus skips over the AutoComplete. I’ve tried to force focusEnabled and hasFocusableChildren to true, but it doesn’t work. Is it a known bug? Is there a workaround?
Sebastien,
Check out this comment (maybe it’ll help)
http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-740
Best,
Hillel
In fact, this solution might work if you set the tabIndex explicitly, but it doesn’t work if you let the Flash runtime determine the tab ordering itself. But I found a more universal solution. If I add “hasFocusableChildren=’true'” to all the levels of the AutoComplete source, it works as expected.
Hi Sebatstien,
Could you write a small post about how to set hasFocusableChildren=’true’ at all levels of AutoComplete source? I tried it in a few places, but no love.
Have you noticed any downsides to your suggest fix?
Please help, my app has over 50 AutoCompletes so without this fix, I’m going to need to tabIndex over 200 components in order to get all my forms working. Thanks
Still suffering with this. I tried the patch,
override public function set tabIndex(value:int):void {
flowBox.textInput.textInput.tabIndex = value;
}
override public function get tabIndex():int {
return flowBox.textInput.textInput.tabIndex;
}
But I’m getting a null flowBox, so the tabIndexes are getting set.
Any suggestions are welcome. Thanks!
Doug in Paia,
If you’re currently setting the tabIndex in the MXML, try setting it on creationComplete.
Hi, is there a way to limit the growing of the input box??
I only want to allow it to grow to 2 lines of input text. I tried setting maxHeight=’50’ but didn’t do anything.
If you enter more than two lines worth, then have the text scroll out of sight..
thanks,
Steve,
Check out this comment http://hillelcoren.com/flex-autocomplete/documentation/#comment-2062
Hope it helps,
Hillel
Hi Hillel! Thank you for this great component!
I would like to tell with what I experienced when using AutoComplete component.
I am using it as ItemEditor in AdvancedDataGridColumn. I noticed this feature: If you type the text in the AutoComplete (allowNewValues = true), then do not hit the Enter key, and click the mouse on the next row, then the AutoComplete does not save the entered text. If you press Enter after the text inputed – all is ok.
How can I change the code to get this functionality? Thank you.
Jane,
Hmmm… you could try adding a focusOut listener to the component and check if there is text in the input but not a selectedItem and then adding it manually (or something of the sort). This can get a bit tricky b/c the grid will try to destroy the component when you focus to the next cell.
Hi! I’ve solved the problem adding event listener for Change event rather focusOut, when focusOut fires text property already empty.
Thank you for point me to the right way!))
I am trying to get Autocomplete like google, I am looking for a set of results and not any individual record, Using current autocomplete I can only get one precise record from the XMLlist.
e.g.
when I type in “jho”
I want the search on all fields of my collection
I want the search results which in a grid (results: Name Field: Jhon, Jhonson City Field : johannesburg)
Could you help me with this?
Gaurav,
Check out this comment, I think it explains what you’re trying to acomplish
http://hillelcoren.com/flex-autocomplete/#comment-1141
Thanks for the awesome component.
I wonder if it’s possible to customize appearence of SelectedItem (the same idea as itemRenderer).
Can’t find the way to accomplish this ….
Thanks again 🙂
Alexander,
Check out the “Custom Skins” section of the documentation.
Hope it helps,
Hillel
So this is the only way (via ProgrammaticSkin)to add action button (for example) to selected item ?
Thanks for your attention
Alexander,
The selectedItems are regular Flex buttons, if you want to use the source you can modify them any way you modify regular buttons.
Hi,
In the AdvancedAutoComplete, is there an event I can listen to, to see what selected items being clicked? For an example, with the FACEBOOK style the selected items are in a light blue, but when I click on one of the selected items, it turns to a darker blue, so there must be a way. I tried click and itemClick events but that weren’t the right events.
thanks.
Tmv,
To do this you’d need to modify the source. The selectedItems are just regular Flex buttons. In SelectedItem.mxml add a click listener to the button and dispatch a custom selectedItem clicked event which bubbles and you should be good to go.
Hope this is clear
Hi Hillel,
it’s a very nice component, really. I’m just exchanging the buggy Adobe Autocomplete Component and am using your one in my project.
I have just one thing, that troubles me: I’m using the component in a form. There is an Keyboard event listener added to my form so that it can be submitted by hitting the “Enter” key.
When the user selects something in the autocomplete component, the return key should not yet submit the form but only select the selected Item in the dropDown list. With the Adobe Component this works out of the box. You can press enter two times. The first one selects the item, the second enter submits the form.
With your component the form is always submitted already at the first “enter” key event. How can I resolve that?
Schali,
I noticed the same problem, this will be fixed in the next version. To fix it now you’ll need to use the sourcecode, change the hideDropDown function into AutoComplete.mxml to
public function hideDropDown():void
{
PopUpManager.removePopUp( _dropDown );
callLater( enableDefaultButton );
}
private function enableDefaultButton():void
{
if (focusManager)
{
focusManager.defaultButtonEnabled = true;
}
}
Hi Hillel,
I must appreciate the work you have put in to develop such a handy component. I am really satisfied by the features it has got and the customisation that can be done.
I would also like to see one more customisation in this:
I was going through populating the component through server dataset. And I am experiencing that the component does not have have the capability to disable the edit functionality while the server call is completed.
We should have a customised boolean property which the developer should set to true/false depending he wants the user to type in while the server call is getting completed.
To Elaborate my point let us have an example:
A bindable customised property waitingForRemoteList will be set to true or false by the developer checking the server call is completed or not.
If not completed the text field should be non editable and if completed the text field should be editable.
In my case I am making a query to the server for the data starting with a specific character and my matchType is beginning always.
Please comment if we can put some funtionality like this.
Appy,
Have you tried setting the enabled property to false?
Hillel,
I guess you have not understood my point in here. I am talking about user should not be able to enter any text while the server request is in process.
And if we set the enabled property to false that will kill the focus of the control and the character entered at that point will be skinned as Mac/facebook.
I am talking of an enhancement where developer should have an additional customisation to make the input control stop taking user input characters while the server request is in process.
Example:
User has entered ‘A’ the moment the user has entered, a service will be invoked to get all the searches starting with the character A and till the time the front end recieves the response back from the server the input control should not allow the user to enter the next character.
like:
After A no further character till the past request is processesed.
Appy,
If you don’t need to enable the user to add new values then this should work (ie, make sure allowNewValues=’false’). Otherwise you’ll need to make some changes to the source code to make this work. Essentially you’re going to want to disable the focusOut handler if the TextInput loses focuses while it’s processing a request (so that we don’t assume the text entered is the final value entered by the user).
Hope this helps…
Appy: It is Antispam feature.
Dynamic data Example uses 0.5 seconds delay to invoke database search. So, if you type fast enough it doesnt invoke.
Here is my example:
private function OnSearchChange (e:Event):void
{
/* Если пользователь быстро печатает и промежуток между нажатиями менее пол секунды, то не посылаем запросы к БД */
if (this.delayTimer != null && this.delayTimer.running)
{
this.delayTimer.stop();
}
if (this.searchText.length >= this.MinSearchLength)
{
this.sellist.removeAll();
this.delayTimer = new Timer( 500, 1 );
this.delayTimer.addEventListener(TimerEvent.TIMER, SearchData);
this.delayTimer.start();
}
}
private function SearchData( e:Event ):void
{
this.TypeOper.send (this.ContextId, this.basetype, this.AppendParam, this.searchText);
}
You can improve this method by adding new property RequestProsessing by setting it to true when you invoke DB search and setting to false when you get answer. And block requests when it set to true.
It is not good idea to block input.
Hillel:
I found out two small bug/ideas:
1. When ItemList is empty ShowDropDown method generate Error. So I have to use something like this:
if (this.isDropDownVisible() == false && this.sellist.length > 0)
this.showDropDown();
If source is dynamic data from DB it is common case.
2. “,” (comma) is used as item list separator. If allowMultipleSelection is set to false when user types “,” it clears input. If selected item consists “,” inside string and you try to edit selected string it clears all symbols up to “,”. The only way I can prevent it – Change source code of your component, by replacing “,” for example to “|” and then complile it.
It will be good gdea to Add ItemDelimiter property so user can control what symbol to use.
Sorry for bad english.
Not case insensitive an all characters.
First, tip of the hat for this component. Very useful and adaptable.
When I write the character å,ä,ö in the searchstring autocmplete becomes case sensitive for that character.
Is there a quick fix or do I have to restrict so that the user have to write upper case (or lower case)? Or has I missed something else?
Kalle
Kalle,
As per this comment it looks like the root of the problem is that we’re using a regExp to do the search. You could work around this by defining a custom filterFunction with uses indexOf to check for a match.
Hillel:
Awesome component! We’ve used this on several projects.
One issue that we’re finding when using it while building with Ant…if you open up the SWC (rename it to a zip and decompress it) you’ll see the familiar Mac OS .DS_Store files in each of the folders within the zip…these create issues when trying to delete exploded SWCs with Ant — can you remove these and repackage the SWC without them? …I actually went ahead and did this in another Flex Lib project and the SWC seemed to work fine in a test project and the real one, but I thought I’d give you the heads up.
To remove the .DS_Store files from it, you need to ditch Finder and open up terminal and cd to the root library proj and then run this command:
sudo find . -name “.DS_Store” -depth -exec rm {} \;
I can run you through a quick skype screen sharing session to show you what I’m describing if I’m not being clear.
Again, awesome component.
-riley
Brian,
First off, thanks for the tip about removing the .DS_Store files (they’ve always bugged me). If you’re having trouble with the SWC I’d suggest creating your own. It’s pretty easy, just create a Flex library project with the AutoComplete source code. One thing to watch out for is that you need to include both the classes and the assets in the Flex Library Build Path.
Hi,
What a great component, hope Adobe include it in the next version.
I think I found a bug in the autocomplete component
if, in the array collection, I used an object with parenthesis in the label, the component never find it
exemple : label=”test (hello)” //never find if search hello
but if I write
label=”test ( hello )” // with spaces, it works !
Thanks again to share your work
regards
switcherdav,
I’m sorry, I’m having trouble replicating your issue. If you could put together a sample application I’d be happy to take a look at it.
Hi,
Thanks to reply
Here is a simple example
First, search with : obj
//result : 2 objects
Then
try to search : test
//Only one objet, the one with spaces : ( test )
//The other is not find : (test)
http://switcherdav.ovh.org/lab/bin-release/autocomplete_test.html
switcherdav,
Thanks, that was very helpful.
It looks like this is now working with the latest code. Please try checking out the code from the google code site.
Thanks to reply so fast,
I downloaded the latest version from google code
http://flex-autocomplete.googlecode.com/files/AutoComplete.zip
But it doesn’t work for me, always the same result
I use FlexBuilder 3 with SDK 3.5 (build 12683), I also tested with SDK 3.4
The good news is that you can do it, so the problem is certainly in my code
thanks again and sorry for the multi-posts
complement : I also downloaded the latest version from the SVN, but it’s the same result for me
switcherdav,
It’s possible the root of the problem is the setting for the matchType property, try setting matchType to “anyPart”.
I’m so sorry, with the matchType, everything is ok
To punish myself : 50 pushups
switcherdav,
No worries… sorry I wan’t able to give you the correct answer right away.
Best,
Hillel
Hi Hillel,
I have a Bindsetter listening to the selectedItems property.
BindingUtils.bindSetter(countryListChangeListener,autocomplete,”selectedItems”);
I want to react on changes in the list, when an item is selected manually and when it is selected programmatically by action script.
autocomplete.selectedItem = myListItem;
The change event doesn’t seem to be dispatched, when the selectedItem is set by action script. Do you have a hint for me, how to resolve this?
Thanks, Schali
Schali,
Hopefully this comment will help…
http://hillelcoren.com/flex-autocomplete/documentation/#comment-2331
Hi Hillel, about the answers here to:
Oliver 8/20/2009
Steve 1/5/2010
SJ 1/6/2010
Sorry but I couldn’t understand it yet…
I have multiple sources to load into my dataprovider (ones at a time), my AIR app launches with a default and then the user can change it into another, the data from the different sources has same labels and ID numbers but some of them mix up. Checking the info on the autoComplete I found repeated ones (same label but different ID), one right and one wrong. I’m trying to reset everything and it is no working.
I need to complete reset everything that the autocomplete has and begin from the beginning… I try to understand from previous answers and I still confuse, can you help me…
Joseph Dov Kohan,
I’m sorry, I’m not sure that I’m following your question. Could you please try putting it another way.
Hi Hillel, I cannot really explain it because I myself don´t really understand the reason of the problem… but I did some changes and it is working OK now…
Thank you…
Joseph Dov Kohan,
Great, happy to hear it.
Let me know if you run into any other issues.
Best,
Hillel
Hello! Fantastic component, it’s really high-quality. I especially like being able to customize its behavior with the filter and label functions.
I’m using it in a somewhat-advanced way right now: the search string is getting parsed by a custom parser and I update the drop-down list contents based on the current state of the parser.
In any case, I’m having a hard time because it seems that the component *really* likes commas, even if multiple-selection is turned off. I can’t match an entry that contains a comma — it seems that handleFlowBoxChange() always split()s on commas.
What do you think the best way to handle this is? I could do some trickery by transforming commas into something else, and then back again for display, but I thought you might have some thoughts.
Thanks again for the great component!
Adrian.
Ach! I see that this has already been discussed here… I’ll try Peter M’s idea.
Thanks!
Adrian,
Check out this comment…
http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-941
Hey Hillel,
Just would like to express that your AutoComplete component is kick butt.
I just have a quick question. I’m currently using it as a search filter and am trying to either make the suggestion list disappear or disable any selections of the suggestion list. Is this possible at all and if so, how would i go about doing it?
Will,
The simplest solution is to set enabled to false (but I’m not sure if that would work for you).
Another (more complicated) approach would be to set the disabledItems property to the dataProvider (essentially making all items disabled). I’m not sure if this feature is in the 1.0 release, if it isn’t you’ll need to do a checkout of the latest code from the google code site.
Best,
Hillel
Hi Hillel,
We like your component so much, we’re actually holding back migrating some of our applications to Flex 4 until your component is out of beta for Flash 4.
Do you have any rough estimates for when you’ll be releasing a non-beta flash 4 version?
We’d be happy to help test if you’d like.
-p
Paul,
I’m not currently using Flex 4 and haven’t therefore had the chance to use the AutoComplete under it. However, I’ve heard from a number of people who are using it that it’s working well. The beta label is just there to be cautious, I wouldn’t hold off switching to Flex 4 b/c of it.
Best,
Hillel
In Datagrid(8 rows), when checkbox/ComboSearch is selected in row 5 then cursor moves back to row 4(previous row).
I am new to autocomplete code.
Pls let me know how to debug this.
Thanks
RVerma,
I’m sorry, I’m not sure what would cause that.
A major drawback of Adobe’s autoComplete is that it does not handle multiple autocomplete fields in a single form. Whatever is typed into the first field will be wiped out when text is entered in the 2nd field. Does your autocomplete handle this?
TE,
You shouldn’t have an issue using multiple AutoComplete components in a single form
Best,
Hillel
Hi, I want to change the fontsize to 14, I did this by editing IconButton.mxml and changing line 2 to:
<mx:Button fontSize="14"
and changing fontSize on the autocomplete component to 14, How would I add a buttonFontSize='14' to the component and where do I put the functions/code to propogate down to the IconButton.mxml?
thanks,
steve
Steve,
The font size is a style, to see an example of how to propagate a style down to subcomponents check out the code which handles “selectedItemStyleName”
Best,
Hillel
Hello. Thanks for huge work, first of all.
Quick search through this thread shows that some people have faced the same trouble as me with extra characters and case insensitivity.
So if i use ciryllic letters, component does case sensitive search, and that is not good for my project.
I try to use filter function (sorry if code looks bad):
private function customers_filter(item:*, text:String):Boolean
{
var r:RegExp = new RegExp(text, “g”);
return r.test(item.label.toLowerCase());
}
it works nice, except one thing: found symbols in other case that i type in don’t get bold and underlined,
for example i type «оло» and dataprovider has two items with this piece: «МОЛОКО» and «ололо»
«ололо» becomes underlined and bold while i type in, but «МОЛОКО» just shows in drop-down without any special formatting.
The question is: Is there any way to quick-hack this issue?
Thanks.
Simon Otst,
The RegExp doesn’t work too well with ciryllic letters. I’d suggest using simple string searching functions instead.
thanx for reply,
but this regexp does the job, the only trouble is that filter function don’t apply underline to found substring.
Do you mean that it will make substring underlined if i use simple string search?
Guess not so…
Simon.Otst,
Here’s the code which does the underlining (highlighMatch in StringUtils)
var searchStrPattern:String = “(” + searchStr + “)”;
var regExp:RegExp = new RegExp( searchStrPattern, “igm” );
var returnStr:String = string.replace( regExp, “$1” );
If this isn’t working you could create a custom function which creates the bold’ed string by searching for the start/end position of the match using .indexOf().
Hope this is clear/helps…
First of all, fabulous component.
I just have one small issue I’ve not been able to figure out: as an item editor in a DataGrid, I want to have the drop down shown whenever a cell is clicked (for editing) even if a value is already selected in the cell. It would also be nice to show the list upon delete.
I have tried to piggy-back on a few different events to make this happen, but to no avail.
Any ideas?
Thanks very much.
Sherman,
I’m assuming you’re calling the showDropDown function. You may want to try calling it in a callLater, or extend the component and have it call showDropDown on creation complete.
Thanks for responding so quickly.
Yes, I’m calling showDropDown(). I had already tried both of your suggestions with no success. It’s because upon clicking a cell within a DataGrid for editing an item and after the editor (AutoComplete) is created, the selectedItem property is subsequently set to the value of the cell. As you know, setting selectedItem on the AutoComplete control eventually calls hideDropDown(), which negates my previous call to showDropDown when the creation of the control was complete. I tried adding a listener for the “value commit” event to show the drop down, but then I get erratic behavior due to other instances when this event is fired that I do not wish to show the drop down.
Anyway, thanks for the reply. Even if I can’t figure this one thing out, the component is wonderful – thank you for making it available.
Sherman
Hi Hillel,
I am using flex (Flex 4 now) for last 3 to 4 months.I don’t go into extending flex objects and creating own custom components yet.So I am not clear about the concept of focus managers etc.I have used AutoComplete in my application and modified it to work it in my app.But i am getting focuManager = null when drawFocus is called in handleFocusIn() and handleFoucusOut() methods in FlowBox.mxml file.I coundn’t find out the reason.Is it because i am using flex 4?
Plz help.I can post the code if u want to see the changes i made to it.
Thanks For This Great Component!!!
Prashant,
In certain cases the FocusManager will be null. If you look a the source for the Flex built in components, they will usually check to make sure that it isn’t null before using it… I’d suggest that you do the same.
Hi,
I have the same problem when I use the automplete inside a datagrid, but Outside of the dataGrid the autocomplete works fine.
Is it possible that the component doesn’t work as an itemEditor?
are there a way of fix this??
Sorry, i forgot to say that I’m talking about the browser. Thanks.
Gaston,
Because of the way the datagrid handles the focus events I haven’t been able to use the browser in a datagrid item renderer without causing the cell to stop editing. I think the only way to get this to work may be to do some serious monkey patching to the datagrid class.
Thanks for the great component!
It works fine, but i miss the possibility for changing the “backgroundColor” to give user a visual feedback while form validation. I can set the style, but nothing happens.
How can I change it?
Greetings from Germany,
Patrick
Patrick,
The components is make up of a number of other components. You’re probably going to want to use the source and make the modifications directly. I think you’ll need to update the background color in FlowBox.mxml and PromptTextInput.mxml.
Below is my usage of the component
I am getting the following error while using the component in my application.
Error: Find criteria must contain at least one sort field value.
at mx.collections::Sort/findItem()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\collections\Sort.as:491]
at mx.collections::ListCollectionView/getItemIndex()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:542]
at com.hillelcoren.components::AutoComplete/addItem()[/Users/hillel/Code/flex-autocomplete/src/com/hillelcoren/components/AutoComplete.mxml:925]
at com.hillelcoren.components::AutoComplete/handleSelectedItemsChange()[/Users/hillel/Code/flex-autocomplete/src/com/hillelcoren/components/AutoComplete.mxml:412]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.collections::ListCollectionView/dispatchEvent()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:862]
at mx.collections::ListCollectionView/addItemsToView()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:960]
at mx.collections::ListCollectionView/listChangeHandler()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1080]
at flash.events::EventDispatcher/dispatchEventFunction()
Could you please rectify this problem in your next release
<
<hc:AutoComplete id="descriptionOfGoodsCB"
dataProvider="{modelLocator.lineItemGoodsDescription}"
labelField="goodsdescription" allowNewValues="true" allowEditingNewValues="true"
autoSelectEnabled="true"
text="{modelLocator.lineItem_selectedItem.goodsdescription}"
width="290"/ >
Tarun,
From the error it looks like the error is being caused by the sort logic. Do you have a sort applied to the dataProvider you’re using in the component?
Hi folks,
Has anyone seen a tremendous spike in processor usage when the autocomplete control is instantiated? I have an AIR 1.5 application that, when the control is instantiated, my processor usage spikes to nearly 100%. I’ve conclusively narrowed it down to this control being instantiated (in two distinct places in my application).
I’m at a loss to explain why this would be the case and would be grateful for any clues as to how to address the problem.
Thanks!
-Matt@Typidee
Matt,
It’s not a light-weight component but I’m surprised that you’re seeing such a spike. Have you tried creating a test application which just has the autocomplete to see if the issue is with the component itself or with how it’s being used in your application.
If you don’t need some of the advanced features of the component (most notably multi-select) you may want to check out this one… http://www.tink.ws/blog/filtercombobox/
Hilel,
I’ve been using the component successfully for about a year and now I’m trying to port my application to Flex 4. Well the component just stopped working entirely. No suggested offered, no selection, etc. I then tried the Flex 4 beta version without success. I’m using the component as an item editor in a DataGrid. I’ve tried using the component outside of the DataGrid but no dice.
Any suggestions?
Jeff
I’ve done further testing to isolate things a bit. When I have the AutoCompleteAdvanced component “standing alone” it works fine. There seems to be some problem with the way I’m implementing this, which is within a TitleWindow and from there, inside a custom component. I’m going to work on this more.
Hi,
I have a problem when the user type a text with doesn’t exist in the array collection and click in a inlinebutton with this function:
private function buttonClick():void{
advancedAutoComplete.showDropDown();
}
give the error 1009 how can i resolve this?
Pedro,
Could you please provide the full stacktrace
Thanks
So far I’ve validated that the Flex 4 component will work just fine inside of a TitleWindow. It may be traceable to the framework I’m using (Parsley). We’ll see.
Hi Hillel.
I’m a beginner of flex develop. Few days ago i found your blog of autocomplete and i really excited with it.It was exactly that what i want.But when i put it into my project i had some problem.The style did not work like your demo.I put “default.css” into my source root and change the “selectedItemStyleName”,it did not work.When i try to see the source of your demo i found a error with “Not found”.Could you give me some advice or send me i copy of your demo’s source?
PS:Sorry for my pool English.
ykkoy,
If you’re new to Flex I’d suggest you use the SWC file rather than the source code. The source for the demo is available in the ZIP file in the examples folder.
Best,
Hillel
Hi,
I am creating AutoComplete control in AS like this:
var txtAutoComplete:AutoComplete = new AutoComplete(); txtAutoComplete.backspaceAction = “remove”;
txtAutoComplete.setStyle(“selectedItemStyleName”, “none”);
However, the setStyle is not working for me.
Can you please suggest me something on this?
Thanks,
SS
SS,
I’ve tested it and it seems to be working for me, do the other styles work you?
I’m also having trouble getting styles to work with Flex 4. There isn’t a compiled version distributed with the Beta so I just added all the code to my project. What do I need to do to get the styles to work?
Thanks
FigBug,
The component includes a defaults.css file, try including it in your main application file.
Hi Hillel,
It does not work for me at all. I just want to get rid of the button style of the text and for this need I was using the above given code.
Actually, my need is to build the whole UI dynamic, hence I am creating AutoComplete control using ActionSctipt. Although it works fine if I create it in mxml tag but my need to dynamic using AS.
Can you suggest me?
Thanks,
SS
SS,
Are you using the source code? If so, please try using the SWC.
Hi Hillel,
I notice the AutoComplete takes “macMail” as default style. I want to change to “none” style using default.Css file. However, I am not sure how to do this in Flex Builder IDE.
Can you tell me?
SS,
A simpler approach (which I actually use in my applications) is to create a component which extends the AutoComplete. In that component simply set any changes you want made.
G’day mate,
Thanks for the awesome component, we are finding it very useful here. I thought I’d submit an enhancement we added to ours. We quite often deal with selected item ids instead of selected items. So, in addition to your selectedItemId, I added a selectedItemIds property. Note that in our case, we changed the id to be an Object, rather than a Number. This allows us to match properties which are strings as well.
Additional properties:
protected var _selectedItemIds:Array;
private var _selectedItemIdsChanged:Boolean;
In the commitPropeties function (just before if _selectedItemsChanged):
if (_selectedItemIdsChanged && _dataProvider)
{
_selectedItemIdsChanged = false;
_selectedItems.removeAll();
var newSelectedItems:ArrayCollection = new ArrayCollection();
for each (var id:Object in _selectedItemIds )
{
for each (item in _dataProvider)
{
if (item.hasOwnProperty( _keyField ) && item[ _keyField ] == id)
{
newSelectedItems.addItem( item );
break;
}
}
}
_selectedItemIds = null;
_selectedItemsChanged = true;
_initialSelectedItems = newSelectedItems;
}
Additional Properties (We find the getter quite useful):
public function get selectedItemIds():Array
{
var tmp:Array = new Array()
for each ( var item:Object in _selectedItems )
{
if ( item != null && item.hasOwnProperty( _keyField ) )
{
tmp.push( item[ _keyField ] );
}
}
return tmp;
}
public function set selectedItemIds( value:Array ):void
{
_selectedItemIds = value;
_selectedItemIdsChanged = true;
invalidateProperties();
}
And finally I changed the isSettingValue function:
public function isSettingValue():Boolean
{
return _selectedItemId != null || _selectedItemIds = null;
}
cheers, and keep up the good work,
Pete.
p.s. I think it would be great if the google code page was encouraged for more than just an svn repository, because this little text input in the comments section is probably not the best forum for this 🙂
Peter,
Thanks, that’s a good change. I’ll definitely incorporate it into the next version of the component.
If you’re interested I’d be happy to give you commit privileges to the google code page. You’re implementation of the feature is clean and you’ve done a great job keeping the code style consistent (I don’t believe one style is necessarily better than other but think it’s incredibly important to have consistent code).
I was hoping more people would become contributors to the codebase but I’ve found that the vast majority just want to use the component (maybe making a tweak or two for their own purposes) and then get back to working on their app (not that there’s anything wrong with that).
Best,
Hillel
Hi Hillel,
I’ve used your component in a number of Flex 3 projects right now – and I have to say it is just gorgeous. A really fantastic piece of work! Many thanks for sharing it.
I started with a Flex 4 project some time ago (when Flex 4 was still beta). Now I’m getting to a point where I could badly use this component in this Flex 4 project. I tried your Flex 4 beta version of the component but without luck, it does not even compile. I do not know enough about the Flex 4 internal to fix these issues. So I would like to ask, whether we can expect a new stable Flex 4 version of your component in the near feature? Pretty please?
Yours,
Daniel
Daniel,
Thanks for the kind words. Although the link for the Flex 4 version of the component has the “beta” tag it should work reasonably well (I know of a number of people using it in their Flex 4 projects). What error are you getting?
First of all there were a lot of namespace errors due to the recent namespace changes in Gumbo. I had to replace ‘xmlns:mx=”http://www.adobe.com/2006/mxml”‘ with ‘xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:mx=”library://ns.adobe.com/flex/mx”‘. Otherwise I just got “Could not resolve … to a component implementation.” errors. But this was a breeze to fix using find and sed.
But after that I’m getting interface method not implemented errors like these:
AutoComplete-Gumbo/src/com/hillelcoren/components/AutoComplete.mxml(-1): Error: Interface method get listData in namespace mx.controls.listClasses:IDropInListItemRenderer not implemented by class com.hillelcoren.components:AutoComplete.
AutoComplete-Gumbo/src/com/hillelcoren/components/AutoComplete.mxml(-1): Error: Interface method set listData in namespace mx.controls.listClasses:IDropInListItemRenderer not implemented by class com.hillelcoren.components:AutoComplete.
AutoComplete-Gumbo/src/com/hillelcoren/components/PromptTextInput.mxml(-1): Error: Interface method setTextFocus in namespace com.hillelcoren.components.autoComplete.interfaces:iComboItem not implemented by class com.hillelcoren.components:PromptTextInput.
And so on…
Maybe I’m using the source tarball the wrong way? I just added the directory with the autocomplete files to my source path in my flex-config.xml:
lib/AutoComplete-Gumbo/src
lib/AutoComplete-Gumbo/src/defaults.css
I really hope you can give me helpful hints… 😉
Yours,
Daniel
Daniel,
You shouldn’t need to change the namespaces as Flex 4 supports using either namespace. I think the problem is how you’re including the source in your project. Since it isn’t a SWC I’m not sure that you want it in your lib folder. Are you using FlashBuilder, you should just be able to add the autocomplete code to your source path.
Hi Hillel,
unfortunately I almost no time in the past weeks. But now I looked again into this issue. I solved it simply by using compc to build a swc file from your Gumbo sources… and it works. Gorgeous! I just get a warning “Type ‘AutoComplete’ in CSS selector ‘AutoComplete’ must be qualified with a namespace.”… but I assume that this is not of importance…
Again many thanks for your great component and your help. You are great! Honestly!
Yours,
Daniel
Daniel,
Happy to hear you were able to figure it out. To get rid of the warning add/change the following in the defaults.css file.
@namespace components “com.hillelcoren.components.*”;
components|AutoComplete
{
selected-item-style-name: macMail;
}
Best,
Hillel
I am trying to use AutoComplete as Datagrid Itemrender in Flex 4, but I don’t know how to pass data from php service to the component. It works fine as an alone component, but errors appears if I try to declare Autocomplete as itemrender ( in online declaration and external mxml component).
Radek,
There are a number of ways to implement item renderers. I’d suggest creating a custom component rather than an inline item renderer, you can then handle your data needs inside your custom component (or inject the data into it).
Hope this helps…
Hi Hillel,
I am having a problem with the autocomplete. After the component gets focus and then loses focus, all of the buttons on my page no longer work.
Any help would be much appreciated,
Aaron
I was able to get the same behavior using your EmailDemo.mxml. I added a check box component to the page, and after the autocomplete component gained and then lost focus the check box no longer worked. Also, the autocomplete component no longer worked correctly either. Wasn’t able to add any more email addresses.
-Aaron
Aaron,
I’m not sure what the issue is. If you could create a sample application which demonstrates the issue I’d be happy to take a look at it.