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 
I’m having trouble with my instance of AutoComplete within a form not being included in the tab order. I have regular text inputs on either side of the AutoComplete, but tabbing through will hop right over it.
I saw a reference you made earlier to a comment 740 on a previous post, but the link seems to be broken. Can you help?
Great component, by the way.
Sherman,
I’m assuming you’re using the source with Flex 4. There are some small code changes required to use the source with Flex 4, all the changes are commented with “Flex 4”. Some other people are running into this issue so I’m going to put up a new zip which has two source folders (one for Flex 3 and one for Flex 4).
Best,
Hillel
Thank you so much, Hillel.
Same problem here.
Try to set hasFocusableChildren=”true” inside the AutoComplete.mxml – solved the problem for me.
Aloha, I’ve come across your autocomplete component and I’m a real newbie. I am currently looking at a flash based electronic medical records, but one of the things they lack is autocompletion. Currently they use a point/touch click system. Typing is way faster and your autocomplete could leverage their development. The only query I have is say you type a phrase autocomplete, and you type another it autocomplete works as plans.
However when you type something not in the database, and then “continue by a new space” it doesn;t restart autocompletion next “word/phrase” that would basically complete the functionality that I’m looking for.
Mahalo!
stephen gee
stephen,
I’m sorry, I’m not completely following you. What do you mean by “continue by a new space”, could you please try putting it another way.
hello.. can i use an textarea component instead a textinput? the idea is use this completition as a code generator.. thanks!
fernabel,
In the current version of the component that would be pretty hard but people have managed to do that with the earlier version.
http://hillelcoren.com/2009/02/01/flex-autocomplete-almost-there/comment-page-1/#comment-177
You can find older versions of the component on the google code site
http://code.google.com/p/flex-autocomplete/downloads/list?can=1&q=&colspec=Filename+Summary+Uploaded+Size+DownloadCount
I’d try this with version 0.93
Best,
Hillel
Hi,
very nice component !!!
I’m missing some standard textInput features like “restrict” and “maxChar”.
Can you add them? We would even be prepared to join your work for this component as we have quite some experience in component development.
Daniel.
Daniel,
I’ll add these in the next release. For now you can access these properties using the following syntax:
autoComplete.textInput.textInput.
Alternatively, you can expose these properties in the source code.
Hi,
We are planning to use your component. Could you please let me know what your licensing terms are in terms usage and distribution. I know you say that the component is freeware. Does that mean, we can take the source code and modify it to suit our purpose ? Do let me know what your email is , so I can further communicate with you…
Anand,
Absolutely, you’re welcome to make any changes you’d like to the source. My email address is my full name (no dots or dashes) at gmail.
Best,
Hillel
I’ve been using your component for a while now – it works great, thanks!
Now… I’m running into an issue when I’m using it in an app that I’m migrating to Flex 4 – I am using the spark skin with lots of halo components.
If I type a few chars, then select an item from the dropdown – the selection is made but the value in the box is just white. I’ve tried using both the facebook and the macMail skins but neither seem to work.
Is there some kind of style that might be overriding the autocomplete styles I should look at or something i should try to get the values to display?
Ryan,
Before I start suggesting things to try I just want to make sure you’re using the latest version (1.1) and that you’re using the SWC.
Yes, I’m using the swc for 1.1-Fx4
In my datagrid component sometimes it acts funny too – if I select a row with it, it disappears – I wonder if it’s doing something funky with the programaticSkin – maybe I’ll go make my own custom skin but explicitly define all the states with colors (just as a test)
if I make a custom skin then do I just specify the whole classname in the selectedItemStyleName property?
In case anyone has the same problem – I was compiling it with just the spark theme before… adding in the halo theme in addition to the spark theme makes it work properly.
Hi Hillel,
Thanks a lot for the great component.
I got a question here. I have a form consisting of option(use autocomplete), price(TextInput) and an Add button. Add button is enabled whenever option is not blank. At the moment, it seems only when option autocomplete loses focus, Add button is enabled. So the question is how to enable the Add button, while user is typing?
Thanks,
Cheng Wei
Cheng,
Are you using the defaultButton property on the form?
Hi Hillel,
Thanks for your quick reply.
No, i am using spark.components.Button. At the moment, i bind AutoComplete.text to an Object, and in Button.enabled, i detect the object to see if the text is not blank.
Thanks,
Cheng
Cheng,
If you could email me a sample application which demonstrates your issue I’d be happy to debug it.
Hi Hillel,
I have sent a sample app to you.
Thanks,
Cheng
Cheng,
Thanks for the zip, it was very helpful. Try binding to the “searchText” property instead of the “text” property of the AutoComplete.
There’s an explanation of the difference between the two properties in the documentation on my blog.
Best,
Hillel
Solved the problem, Thanks Hillel.
I hope the input, and then connecting to the database through the service to get the return value.
qishi,
I’m sorry, I don’t understand your question. Could you please try explaining it another way?
Hello,
Good work! I just wanted to know about performance on this component. If I have, say 10,000+ records, will it make the component usage sluggish?
Raghu,
If you keep things simple (ie, avoid complicated searching\renderers) you should be ok….
Hi Hillel,
I just moved to flex 4.0. The defaultButton property was working fine with the autocomplete, but now when the auto complete component gains the focus, the defaultButton property does not seem to be working. When another component in the form (such as a textfield) gains the focus, it is working fine even with the auto complete gaining focus from that time. Am I missing sth.? I would be glad if you can help. Thanks for the great component.
alptug,
I’m haven’t been able to replicate your problem.
Here’s the test app I’m using (I’m compiling against the 4.1 SDK)
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:components=”com.hillelcoren.components.*”
width=”400″ height=”400″>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection([“one”,”two”,”three”]);
]]>
</fx:Script>
<mx:Form defaultButton=”{ button }”>
<s:TextInput/>
<components:AutoComplete dataProvider=”{ _data }”/>
<s:Button label=”click me” id=”button” click=”{Alert.show(‘clicked’)}”/>
</mx:Form>
</s:Application>
hi Hillel , the default button only works if other component is focused, but if you have autocomplete as first component, default button will not work.
If you could send me a sample application I’d be happy to try to debug it.
Hi Hillel,
thanks for the reply,
sdk : 4.6
lib: AutoComplete-1.2-Fx4.swc
sample code: http://pastebin.com/Rg75LHEV
Its your sample, i just put the autocomplete at the top of the form.
the default button is activated once the textinput at the bottom takes focus, and then it works okay.
hope you can fixy fixy
thanks much
Thanks for the example, I was able to replicate your problem and track down the issue. To fix it you’ll need to use the source and comment out the focusInHandler function in ShorterTextInput.mxml.
it works! thank you very much Hillel for taking time to answer! where can i donate?
can i ask an offtopic question? hehe have you used the olapgrid? i have a problem when i create a cube with thousand of lines, the flash player 15seconds(60sec) max kicks in, been asking this questions for a long time and nobody did give me an alternative
Brilliant, happy to hear it fixed your issue (no donation necessary).
I’m sorry, I’m not familiar with the OLAPGrid. I found this article which may help though… http://www.joshuaostrom.com/2010/06/14/flex-olap-benchmarks/
Not work link download!!!
We have just converted our app that uses AdvancedAutoComplete from Flex 3 to Flex 4. We’re using the Halo theme.
Suppose I have a dataProvider that contains [“foo”,”bar”]. If I choose one of those, with the arrows or by typing part of one of those strings, it is good. But if I type another string like “xxx” the text goes to empty instead of keeping the value that was typed. If the id is “chooser”, chooser.text and chooser.searchText are empty strings “”.
This was working well in Flex 3. Any ideas how to fix it in Flex 4? Thanks.
P.S. I checked and I am building with the latest AutoComplete-1.1-Fx4.swc.
mitch,
I’m sorry, I’m not able to replicate your issue. Here’s the test script I’m using.
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:components=”com.hillelcoren.components.*”
width=”400″ height=”400″>
<fx:Script>
<![CDATA[
import com.hillelcoren.components.AdvancedAutoComplete;
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection([“one”,”two”,”three”]);
]]>
</fx:Script>
<mx:HBox id=”theForm”>
<components:AutoComplete dataProvider=”{ _data }” id=”ac”/>
<mx:Text text=”{ ac.searchText }”/>
</mx:HBox>
</s:Application>
I found the problem. When I set allowNewValues=”true” it works as I want it to.
The doc says the default is true and I think with Flex 3 it behaved that way, but with Flex 4 it is behaving as if the default is false.
mitch,
Sorry, just saw your response. Happy to hear you got it working.
Hi Hillel,
How do you get the text which was entered (but not on the dataprovider)? For example, you tried searching for the word ‘cards’ in the autocomplete component, and there is no item there that has the word ‘cards’ on it.
I tried using the following properties:
autocomplete.searchText
autocomplete.textInput.textInput.text
But none of this returns the value which was typed in. How do I get the value typed in?
Thanks.
Batuta,
You should be able to use the searchText property. You may want to check that clearSearchOnFocusOut is set to false (otherwise the text will be cleared). Also, you may want to set set allowNewValues to true.
Hi Hillel,
I got the following error, which i think it may be because the value binding to autocomplete.searchText is null. do you have any idea?
TypeError: Error #1009: can not access null method or property
at com.hillelcoren.components::AutoComplete/initDropDown()[C:\Users\hillel\code\AutoComplete\4Lib\src\com\hillelcoren\components\AutoComplete.mxml:1287]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()
Cheng,
Try adding a call to createDropDown() at the beginning of initDropDown().
I posted two messages yesterday (Feb 9 2011) and today I don’t see them. Did something go wrong with wordpress?
mitch,
I see your two comments:
http://hillelcoren.com/flex-autocomplete/documentation/comment-page-3/#comment-5169
http://hillelcoren.com/flex-autocomplete/documentation/comment-page-3/#comment-5168
Hi,
I am using your Autocomplete Component. I get the following error when i click anywhere on the application.
TypeError: Error #2007: Parameter blendMode must be non-null.
at flash.display::DisplayObject/set blendMode()
at mx.skins.halo::HaloFocusRect/updateDisplayList()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\skins\halo\HaloFocusRect.as:156]
at mx.skins::ProgrammaticSkin/validateDisplayList()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\skins\ProgrammaticSkin.as:421]
at mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622]
at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:695]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8744]
at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8684]
I browsed the web for solutions. I am compiling my local code using flex 3.1 sdk and i am using your AutoComplete-1.1-Fx3.swc.
Is there anything that I should change.
Please let me know.
karthick,
I’ve seen that error before when using mismatched SWC/Flex SDK versions, but you’re clearly using the right SWC. You may want to try using the 3.5 Flex SDK.
Hi
Is it possible to autoselect the value while initial load if the data provider has only one object or first object by default. it is useful and user friendly feature.
For example. Country filters the state. state filers city. Many states has one major city. If it loaded automatically reduces, one click and user input. Users are enjoying.
Gowdhaman,
Have you tried setting the selectedItems proptery, ie
autoComplete.selectedItems = new ArrayCollection( [ … ] );
Yes, I done it already. I want to add option like defaultFirstDisplay=”true” means it set first object as selecteditem
Gowdhaman,
That shouldn’t be too hard to do. Create a custom class which extends AutoComplete then add some code to check for data being set to the dataprovider and set the first item in selectedItems.
Let me know if you need more help with this.
Best,
Hillel
Love the component, thanks for sharing it! It’s saved me lots of time and made my client very happy. I’m having one small problem though, one of the places I’m using it is in a popup window with a form. They enter the 3 letters of a person’s last name, and it looks up possible matches and populates the dropdown (using search() and showDropDown() ). But if we close the popup and then open up a new one, when the lookup runs, we get TWO dropdowns, it seems to be hanging on to the first instance of the component. Likewise each new form popup adds another instance. I’ve not been able to figure out how to prevent this, any ideas?? I’m sure it’s just some basic Flex thing I’m overlooking as a relative newbie.
Mary Jo,
I’m sorry, I’m not sure. If you could put together a sample application which demonstrates your issue I’d be happy to debug it.
Hello Hillel, amazing component.
How can I use a dataProvider dynamic, because the component must fetch data in a table with more than 5000 records.
Thanks.
ops…now I could find on the subject in the documentation of the component.
Disregard my question.
Hi Hillel,
I’ve been using ur component, It work great. But now, I want to upgrade skins for autoComplete box component. How can I do that ? Can you suggest to me some idea..?
Thanks alot
Tu Le,
I’d suggest looking at the source code and seeing how the current skins are implemented. You should be able to copy/paste/tweak to create a new skin.
very help full. Thanks Hillel for sharing
I continue to get this error. It is somehow related to when I change from a Flex 4 state that includes the AutoComplete component to one which doesn’t however, I can’t seem to pinpoint exactly why or when. Has anyone else run into something like this? I’ll keep trying to find a way to reproduce it consistently…
I get the same error. The way it happens is when I focus on the AutoComplete component and then I change to another module. I have debugged it, and it throws the exception on line ‘var focusOwner:DisplayObjectContainer = focusPane.parent;’ of drawFocus method in UIComponent.as. It happens because focusPane is null.
Did you get workaround or how did you handle this issue?
You may want to try adding a check to ensure the focusPane isn’t null in the handleFocusIn function in FlowBox.mxml. If you could put together a sample application which demonstrates the problem I’d be happy to help you debug it.
Do you have any formal license applied to the AutoComplete component? GPL, MIT ?
Brendan,
Sorry, no formal license… it’s just free (you’re welcome to do whatever you’d like with the code)
Best,
Hillel
Hillel,
Can you add the ability for us to provide our own custom dropdown? I know we can define a custom dropdown item renderer. However, this will not suffice for my need.
Rick,
In that case I’d suggest using the sourecode and making modifications to it.
Best,
Hillel
I know it’s possible to use this component with a dynamic dataprovider, but is there any way to make that work with multiple selection? For example, I have a component That allows users to select multiple items from a dynamic dataprovider obtained from the server. Whenever they type something it querries the sever for the data and passes the results to the dataprovider of the autocomplete. The problem is, each time they type, the data coming back is going to change so any previously selected items are getting cleared out.
Pat,
Hmmm… have you tried saving the selection when loading the new data and then re-applying the selection after the load completes?
That would only work if I could guarantee that the set of data coming back from the server is going to contain all of the currently selected items. That’s not the case here though, the results are going to change depending on what the user types. The only solution I’ve found so far is to use a standard autocomplete for the input and display the selected items in a separate list in my component.
I’d love to be able to do the same thing with multiple selections when loading from a dataprovider. In my cases, due to the large numbers of possible values that can be returned, I have to wait until 3 letters are entered before pulling from the server. With most of the other fields that I’m using this component with I pre-fill the list, so can use the multi-selection option, so would be great to have a way to use it when populating it in this way.
Mary Jo,
Have you seen the DynamicData.mxml file in the examples folder in the zip file, I believe it demonstrates what you’re trying to accomplish.
@Hillel – Yes, that’s what I based my code on. but I’m having the same issue Pat is, that I can’t allow for multiple selections when using this method, because the field gets repopulated as soon as the user types into it again.
Mary Jo,
Have you tried this yet… http://hillelcoren.com/flex-autocomplete/comment-page-5/#comment-5767
@Hillel – Pat replied before I could, same issue for me, the list of results changes each time so not sure how I can apply a previous selection that is no longer in the list? In my case, having multiple selections is not absolutely critical and it’d be a bit confusing to show the list elsewhere, so I’ve had to restrict my users to only one selection for these fields. But it’s a restriction we’d love to not have. I realize though that it’s not an easy problem to solve, due to how the list of values changes each time the user types.
It’s been a while, since I included your autocompletion component. I found out that a new version 1.1 (for flex3) is available and as I tried to include it in my application, I ran into some problems for which I haven’t found a solution yet.
When the New button is clicked the model gets cleared and the selectedItem (recipient) is set to null. However, the previously chosen entry is still in the text field.
Can you tell me, how I can best clear the autocompletion in this case? Please let me know, if I can provide any more information.
Best regards and thanks for creating something this useful!
B
…….
………
…..
// model.message.clear()
public function clear():void {
text = “”;
recipient = null;
}
…..
beat,
In the latest version of the component (v1.1) I’ve added a clear method.
I tried the clear method too, which did not work and I thought this was only for the prompt text but let me check that again.
But shouldn’t the component reflect in any case what is done in my bound model? Should I maybe configure my model differently with the new 1.1 version?
You’re right the clear method does the job and I got it working again.
When I do the following steps, I get a Tooltip window, which shows the html-content of the suggestion list:
1. I open my app
2. the focus is automatically set to the auto-completion field
3. The mouse is hovering over the auto completion field, while I enter the the key ‘b’
Now the tooltip shows the HTML-Code of the highlighted entry:
(b)(u)B(/u)(/b)eat +41111333444. (Brackets being html brackets)
Is there a possibility to disable those tooltips of those list items?
beat,
Yeah… that bugged me too, it’ll be fixed in the next version. For now to fix this use the source code and add toolTip=”” to the top of classes/DropDownItemRenderer.mxml.
Since I am using the compiled swc I will wait for the update.
Is there a way to be notified of new releases?
Best, Beat
This is a really awesome component! Thank you for your hard work on the component itself, for writing such detailed documentation, creating helpful examples and for sharing your work.
Joe,
Thank you for the kind words. Let me know if you run into any issues using the component.
Best,
Hillel
I am actually struggling with an issue, that perhaps you could give me a pointer on if you have the time…
I’m building a POS system on the AIR platform and using your component as the input to allow the cashier to type the name or the upc of a product and also to receive input from a barcode scanner. I am borrowing some code from your DynamicData example but also customizing it quite a lot in order to search on the second field of the database if the first field returns no results.
It works pretty well using the timer for hand-typed searches, but the barcode scanner enters its data so fast that it’s creating some problems. It also sends the keyboard <Enter> command at the end of the scan, which creates even more problems (the data isn’t there to associate with the Enter command yet).
I have tried suppressing the enter command with a listener and then running event.preventDefault when the enter key is pressed, but it doesn’t prevent the component from receiving the enter command.
Also, for some reason if I first enter an item by hand and then try to scan, it is extremely slow. The barcode entry comes in one digit at a time, then pause (for search) and then the next digit, even though the timer is active.
Any ideas?
Thanks!
Joe
Joe,
I haven’t had the chance to use the component with a scanner but I could definitely see that causing issues. Your best bet may be to use the source code and make modifications. To handle the enter command you’d probably need to modify the handleKeyDown function in AutoComplete.mxml.
Hope this helps
Thanks, I’m looking over the source code now. Is there a way (using the compiled swc) to keep the component from automatically searching at all and have it search only when search() is called?
Doing a quick review of the code if the dataProvider isn’t set it won’t do the search. It’s possible you could set/unset the dataProvider to prevent searching (it’s very possible though that this may cause other issues).
Thanks, I tried that but it did indeed cause other problems. The scanner enters data so fast that there was no way to hook up the dataProvider and perform the search in time before it would send the Enter command.
It might work if I disable the code for the enter command within your source code… I’ll keep you posted! Thanks 🙂
Excellent component, but noticed one small bug, even on setting the ErrorString the border remains same color, ideally shouldn’t it be changed to red.
I am using Flex4
Rehan,
I’m having trouble replicating your issue. Here’s the simple application I’m testing with.
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:components=”com.hillelcoren.components.*”>
<components:AutoComplete errorString=”test”/>
</s:Application>
Hi Following is mycode Checking setting the error string:
var iCheck:Boolean =true;
if (platformName.text.length ==0){
Alert.show("HElpp World");
iCheck = false;
platformName.errorString = "Platform/Service Tag can not be Empty ";
}
if (platformAddress.text ==""){
iCheck = false; platformAddress.errorString = "Address Match can not be empty";
}
Where platformAddress is a text input and platformName is an AutoComplete component.
I can see the Red border on textinput box but not on the autcomplete.
Here is the link here for screen shot:
http://img808.imageshack.us/i/noerrorscreen.png/
Thanks for the prompt response.
Rehan
I’m sorry, I’m not able to replicate your issue. If you could put together a simple test application which demonstrates the issue I’d be happy to debug it.
First, I must congratulate you on developing such a great little component.
I just swapped your AutoComplete component into an older Flex 3 app that had been using an “AutoSuggest” component. But, this one is far superior.
I use it for the G/L Account field in an employee purchase card expense reporting app. The G/L Account AutoComplete field is loaded with all the previous account numbers that the given user has used.
Anyway, my experience of installing AutoComplete and having it online for a while now has brought up a couple suggestions:
1) I have some pretty dumb users, who couldn’t figure out how to clear the AutoComplete text input. Rather than clicking onto the G/L account and pressing backspace once, or clicking after the G/L account number and pressing backspace twice, they click to the front of the G/L account and try pressing the ‘Delete’ button to clear the field. Obviously, that doesn’t work. Maybe it should? I don’t know. But, it might be something to consider implementing within the component.
2) One feature I had to build in was the ability to add a G/L account that they have not previously used. There was no real good way to do this just from the component itself. So, I used the Actions menu to provide an “Add G/L to list” pop-up where they could type the number, and have the number retrieved from the host, and then subsequently add it to the list. After that, the user can close the pop-up window, and select the new G/L account from the list. I’m not sure if it would be feasible, or advisable, to add the ability to accommodate the dynamic adding of an item to the list, and the subsequent auto selection of that new item?
Thanks,
Ron Grimes
Ron,
Thanks for the feedback.
1. The ‘delete’ key makes sense (it works for text), I’ll add it in the next version. You may want to consider changing the backspaceAction to “remove” for now.
2. You should be able to add the item and select it in code (w/o needing the user to do it manually). I’ve done something similar in an application I worked on. Let me know if you have trouble getting it working.
Best,
Hillel
Same problem here.
Try to set hasFocusableChildren=”true” inside the AutoComplete.mxml – solved the problem for me.
tr..
Great tool. I am using this with over 8000 records and it is fast. One problem that I am seeing, is that if the cursor is over the search text box, I get a popup or tool tip for the information in the last row of the dropdown. Can you tell me where that is coming from? I would like to remove it.
Steve,
Yeah, that bugged me too… it’ll be fixed in the next version. For now to fix it you need to add toolTip=”” to classes/DropDownItemRenderer.mxml. If you’d like to use the SWC rather then the source you should be able to extend the class, add the code and then set it as the DropDownItemRenderer property in the AutoComplete.
Hope this is clear,
Hillel
Perfect. Thanks for looking into this. I love the tool.
Hi.
Anyone here use FlexMonkey? If yes, maybe can post the delegates and configurations for this component.
Thanks.
Dear Hillel,
First of all thank you for this great component! I am trying to use it in my application and faced with a kind of issue…
I am using the following code (quotes are removed):
When I type something for the first time, everything works great, but I noticed, that the dataProvider changes with changes in input.
I also use {cities} as dataProvider for datagrid, and its appearence also changes.
Can I avoid this somehow?
Weird, the code doesn’t show up…
May be this ove is better:
components:AutoComplete dataProvider={cities}
allowNewValues=true
allowEditingNewValues=true
allowMultipleSelection=false
matchType=anyPart
enableClearIcon=true
Igor,
If you’d like to use the same data collection in the component and a datagrid you may want to try something like
autoComplete.dataProvider = new ArrayCollection( cities.source );
Dear Hillel,
First of all thanks for creating such a wonderful component. Its a pleasure to use the component with such an optimization and smooth working.
I was just curious to know whether the source code of this available or not? If I want to add something or customize, how can i do it?
Regards,
Ashish Mishra
Ashish,
Thank you for the kind words. Yes, the source code is available in the download (there are two slightly different versions, one for Fx3 and one for Fx4). If you’d like to customize the component you may be better off trying to extend it (rather than modify the source) as you’ll then easily be able to upgrade the component in the future (I hope to release a new version in about a month). Of course some changes won’t be possible that way in which case you’ll need to modify the source.
Hope this helps,
Hillel
Dear Hillel,
I hope you will be in best of your health and had enjoyed the long weekend.
Thanks, I’ll do the same. I am facing an issue. I am making a call to server which is returning a list of String from server. Here is the code, i am using :
protected function isinSearchChangeHandler():void {
if(autoCompleteIsin.searchText.length > 2) { isinSuggestList.removeAll(); autoCompleteIsin.enabled = false;
getIsinResponder.token = isinService.getIsinByPartialString(autoCompleteIsin.searchText);
}else {
return;
}
}
private function getPartial_resultHandler(event:ResultEvent):void {
isinSuggestList = event.result as ArrayCollection;
trace("No of isins: "+isinSuggestList.length);
autoCompleteIsin.dataProvider = new ArrayCollection( isinSuggestList.source);
autoCompleteIsin.enabled = true;
autoCompleteIsin.search();
}
Now, After the result is returned from server the text is getting cleared and no dropdown is visible to user. M i missing something Hillel? Since, I am returning a list of String to there is nothing to specify as labelField.
Can u point out, whats wrong here?
Thanks for your quick reply..
Best Regards,
Ashish Mishra
Are you using Flex 3 or 4.
Also, have you tried calling showDropDown manually.
i want to return text only in TextInput field after selected. . So what should i do?
7ruong,
I’m sorry, I’m not following what you’re trying to accomplish. Could you please try putting it another way,
Dear Hillel,
thanks for your reply.
I just find out function selectedItemStyleName=”none”.
But in ListBuilder i want to add 2 button add All and remove All. If i use file AutoComplete-1.1-Fx3.swc, How does modify it?
7ruong
It’d be much easier to accomplish this using the source (as you could just add the button to the ListBuilder class). If you want to use the SWC you can create a Browser class which either extends the existing classes or implements com.hillelcoren.components.autoComplete.interfaces.IBrowser and set it as the browser class.
Dear Hillel,
One more nice to have functionality can be delaying the search by some seconds/milliseconds option. This will help us to have more control over control and may be saving some server bandwidth.
Thanks & Regards,
Ashish Mishra
Hi Hillel,
Your component is great. I have trouble with Shift + Tab combination when the focus is on AutoComplete. It does not work. The Tab is working normally (cycle trough components) but when I press Shift + Tab noting happens (the focus should go to previous component in the tab order). I am using Flex 3 with the SWC lib (AutoComplete-1.1-Fx3.swc).
Ilian,
I’m not able to replicate the problem. If you could put together a sample application which demonstrates the issue I’d be happy to debug it.
Best,
Hillel
I have found the problem. If I set tabEnabled=”true” the problem shows up. After I have removed this the Shift+Tab when focus is on component starts working normally. I haven’t tried to reproduce the problem outside my project.
Anyway, thanks for the quick response. I really do appreciate the effort you put in.
Dear Hillel,
I got it, thanks you so much
Using clear() has an issue. If you use two-way binding, what can happen is this:
1. You clear the selected value.
2. A data binding event gets queued up with callLater().
3. You set the new datasource.
4. The data binding event pulls the data from the (now empty) field, setting the value on the data bound object to null.
The correct fix for this (I think!) is to modify this line in the selectedItem setter:
if (_selectedItem != value)
to this:
if (_selectedItem != value || value == null)
Because _selectedItem is SUPPOSED to be null when a new value gets set, so if it gets a null, none of the logic to update the flowbox gets tickled.
TK
(Er, that was supposed to be a reply to the comment above about how binding to a null value did not clear the component’s value. The solution attached is for THAT specific problem.)
Tim,
Thanks for the comment, I actually noticed the same issue in the current project I’m working on. The next version will include the fix.
Best,
Hillel
I am trying the CustomSkin example, however this does not compile:
Error: Invalid value: customSkin. It must be one of macMail, facebook, underline, none.
Chris,
My guess is you’re using the source (rather than the SWC). In that case you’ll need to manually add the defaults.css style sheet to your project.
I am using the swc component. The error I get seems consistent with the source: in Autocomplete.mxml, selectedItemStyleName is defined as an enum and does not seem to allow for custom skin.
Hmmm… are you using Flex 3 or 4? It’s possible this is a Flex 4 issue. If that’s the case I’d recommend switching to the source and modifying the metadata for the style to enable setting your custom skin.
That’s right, the error shows up only when I use the flex 4 version.
Hillel,
First off, great component! Secondly, I was wondering if you could help me out with a little issue I’m having. I’m using the AutoComplete component and have textAlign set to “center.” When the application loads, most of the AutoComplete pieces will have a value that is already determined and centered. However, when I use the auto complete feature to select a new name from the data provider, the new name comes up left aligned. Is there a way I can get a newly selected name to appear centered within the AutoComplete component despite it’s width?
Thanks for your time,
Alex
Alex,
I’m sorry, there’s no easy way to accomplish that. You’d probably want to use the source code. The layout is handled by the FlowBox class in the updateDisplayList function. The code is somewhat complicated as it has to support multiple selection but you may be able to simplify it to just center a single item.
Hi I am facing a problem.
I am using advanced auto complete.
I have two columns in dataprovider: id and name
eg: id=123
name=’John’
If I start typing ‘Joh’ it lists the item.
Then after selecting the item, the selected item is shown in macStyle(blue color) and the cursor is at the end. Suppose after that I want to add
‘John Kennedy’, but as I enter space after John the field goes blank and it starts from the beginning.
My purpose is if ‘John’ exists in database then user can select ‘John’ or the user can enter a new value ‘John Kennedy’
I am unable to enter ‘John Kennedy’ as it clears the entire field if I type anythink after ‘John’
Anyone having the same problem?
John,
I’m sorry, that’s just how the component works. It’d be possible to modify it to function the way you’d like, I’d be happy to try to point you in the right direction. If you don’t need to support multiple selection you may be better off using one of the other autocomplete components listed.
Have you tried setting allowEditingSelectedItems to true?
allowEditingSelectedItems is not a property for AdvancedAutoComplete.
Can you please check that you’re using the latest version (1.1)
Hi Hillel,
I use Flex 3 and want to set “maxChar” for AutoComplete field.
here my code :
protected function autoComplete_changeHandler(event):void{ if(autoComplete.text.length >3){
autoComplete.showDropDown();
}
else {
autoComplete.enabled = false;
}
}
It’s not work, what’s wrong here ?
Thanks for your quick reply.
7ruong.
I try :
autoComplete.textInput.textInput.maxChars = 3;
but it’s not my mean.
My mean is “If length of input text >3, AutoComplete will begin to work”
Sorry,
“minChar”
7ruong,
Try something like autoComplete.textInput.textInput.minChar
Hillel,
I tried but not exist that attribute.
I edit AutoComplete.mxml:
public var minChars:Number;
And :
if (_searchText && _searchText.length > minChars && _dataProvider.length > 0)
{ showDropDown();
}
It’s working.
Hillel, is there any way to control the process of showing AutoComplete ?
Ex: If i type all-numeric AutoComplete shows with only one character (number) entered on the search text. And AutoComplete will do a “starts with” search if the number of characters is greater than or equal to 3 digits. If the number of characters is less than 3 digits, the system will do an “equals to” search.
Is there any topic with the same problem?
Thanks.
You should be able to use a custom filterFunction to accomplish that, here’s a comment which shows an example: http://hillelcoren.com/flex-autocomplete/comment-page-1/#comment-1143
Thanks you so much,
I build a file swc, but function selectedItemStyleName=”none” not work. It alway shows a button after selected a item.
7ruong,
Why build you’re own SWC instead of using the one in the download. It sounds like you’re not including the assets in the library build path.
Is there any way to unsubscribe from this thread? I made the mistake of checking the box to get followup comments, and they just never stop coming! I love the component but this is the thread that will never die. 😉 I’m hoping posting this without the box checked might reverse it but would be nice if you could unsub without having to do that. I’m sure I’m not the first to run into this (might be nice if there was a forum instead to search for topics, etc. rather than one gigantic list of blog comments)
Mary Jo,
Wow, yeah.. that would be really annoying…. Sorry. A forum is a good idea, I’ll try to setup it up when I roll out the next version. For now you should be able to manage your emails from here http://wordpress.com/#subs&p=subscriptions.settings. It doesn’t look like I’m able to remove you from the list.
Best,
Hillel
On Flex 4.5:
I found that if you’re using CFF fonts and using the
mx|global{
skinClass: ClassReference("mx.core.UIFTETExtField")
}
hack to get CFF fonts working, that autocomplete will NOT work. My temporary workaround is:
components|AutoComplete mx|TextInput{
textFieldClass: ClassReference("mx.core.UITextField");
fontFamily:verdana;
}
This reverts the component to Verdana (A cff/noncff fond) and sets the textfield back to the regular UITextfield.
I believe I could resolve thisin source by switching the text field to the Spark text field which now supports the prompt property, but I haven’t tried that yet.
Actually… i can’t really get this to work very well on 4.5. I’ve downloaded the source and compiled with 4.5 but it’s displaying really funky :(.
Jonathan,
I’m sorry, the component doesn’t yet officially support 4.5, I haven’t tried it yet myself but it clearly sounds like there are issues with it. It’s on my list of things to look into for the next release.
@Hillel, well thanks for the ideas. Unfortunately I could only find a page to manage my “blog subscriptions” which doesn’t seem to track individual post subscriptions. I did try turning on the setting to block all emails, but they still keep coming. I’ll have to set up an email filter to just automatically delete them I guess.
I realize that If I change the dataprovider dynamically, the list of dataprovider accumulate each time.
e.g.
…
this.abc_list.removeAll();
this.abc_list.addAll(otherCollection);
…
this.abclist.addEventListener(CollectionChangeEvent.COLLECTION_CHANGE, onCollectionChange)
…
I found that the event cannot be triggered after the moment of removeAll(), but it works well in addAll(otherCollection) [with event.type “add”].
So the original list is not removed before the new list is added; And the abc_list is actually accumulated?!
what can I do with that?
Rather than removeAll/addAll I’d suggest replacing the dataProvider. ie, this.dataProvider = otherCollection
Hi,
Thanks for your reply.
So removeAll() and addAll() may not work for the AutoComplete? ; or is it the flex problem that removeAll() sometimes cannot actually remove the list of dataProvider?
Kelvin Hung
I believe this is a Flex issue, I’ve seen issues before where removeAll hasn’t worked as expected. I haven’t been able to track it down though.
Hi Hillel,
I use your components with lucene .
Dynamic dataProvider
private function handleSearchId():void
{
var searchStr:String = autocomplete.searchText;
if (delayTimer != null && delayTimer.running)
{ delayTimer.stop();}
if (searchStr.length > 0){
model.baskets.removeAll();
delayTimer = new Timer( 500, 1 ); delayTimer.addEventListener(TimerEvent.TIMER, showAllId); delayTimer.start(); }else{ autocomplete.hideDropDown(); }
}
private function showAllId( event:TimerEvent ):void
{ var searchStr:String = autocomplete.searchText; dispatch(BasketsEvent.getBasketIdEvent(searchStr)
autocomplete.search(); autocomplete.showDropDown();
}
———
There is a small problem. If data returns null, autocomplete still opens with no item in flowBox. Or If data returns 1->5 items, the flowBox shows but it’s height is always 8. how can i fix it?
Hi Hillel,
I am also getting similar issue as mentioned by some user here – http://hillelcoren.com/flex-autocomplete/comment-page-5/#comment-5503
. I get multiple dropdown menus. My logic is after three character, I go to database and get user list and show dropdown menu to show. Each time I type more characters I go to database get filtered list and show dropdown. Everytime I get new dropdown menu and previous one also remain.
< component:AutoComplete id=”users” width=”50%” height=”22″ searchChange=”getUsers()”
dataProvider=”{myPM.myUsersCollection}”
allowMultipleSelection=”true” allowNewValues=”true” allowEditingNewValues=”true”
dropDownLabelFunction=”dropDownLabelFunction” matchType=”anyPart” labelField=”email”
selectedItemStyleName=”macMail” />
protected function getUsers():void
{
var searchValue:String = users.searchText;
if ( searchValue.length >= 3 ) {
if ( myPM.myUsersCollection != null )
myPM.myUsersCollection.removeAll();
myPM.loadUsers ( searchValue )
}
}
< component:AutoComplete id=”users” width=”50%” height=”22″ searchChange=”getUsers()”
dataProvider=”{myPM.myUsersCollection}”
allowMultipleSelection=”true” allowNewValues=”true” allowEditingNewValues=”true”
dropDownLabelFunction=”dropDownLabelFunction” matchType=”anyPart” labelField=”email”
selectedItemStyleName=”macMail” />
protected function getUsers():void
{
var searchValue:String = users.searchText;
if ( searchValue.length >= 3 ) {
if ( myPM.myUsersCollection != null )
myPM.myUsersCollection.removeAll();
myPM.loadUsers ( searchValue )
}
}
/** This is invoked once results are fetched from database **/
public function userListChanged(event:PropertyChangeEvent):void {
users.hideDropDown();
if ( (event.newValue as ArrayCollection).length > 0 ) {
users.search();
users.dropDownWidth = 300;
users.showDropDown();
users.dataProvider = new ArrayCollection ( myPM.myUsersCollection.source );
}
}
public function dropDownLabelFunction( item:Object ):String
{
var string:String = item.lastname+ ” ” + item.firstname + “<” + item.email + “>”;
var searchStr:String = users.searchText;
var returnStr:String = StringUtils.highlightMatch( string, searchStr );
if (users.selectedItems.getItemIndex( item ) >= 0)
{
returnStr = “<font color='” + Consts.COLOR_TEXT_DISABLED + “‘>” + returnStr + “</font>”;
}
return returnStr;
}