AutoComplete

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

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.

914 thoughts on “AutoComplete”

  1. Hi Hillel,

    Thanks for the great component!
    Although I have the following question: when can we expect the Flex 4 version of this component? I’m currently porting my current (Flex 3) project to Gumbo and I noticed the AutoComplete doesn’t work anymore. Too bad because it works rock solid in 3 😉

    Thanks for your reply 🙂
    Bart

    1. Bart,

      Thanks for the feedback. That’s a fair question, it’s hard for me to commit to a date as I’m not sure how much is broken just yet. In the long run I’d like to rework the component to use the new spark architecture but for now I’d be happy if it just worked. My personal goal right now is to get it basically working by the end of July.

      Hope that works for you,
      Hillel

    2. I also tried to port this component to Flex 4, with out luck. The main problem I ran into was namespace resolution. I’ve converted plenty of things from 3 to 4 and solved plenty of namespace issues in doing so, but this one would not compile no matter what I tried.

      Anyways, just adding some more feedback, this component really is kick ass, and free, so I’ll take what I can get with those two qualifications. Let us know if you get the flex 4 port done!

      Thanks,
      Matthew

  2. Hi Hillel,
    I’m a noob in flex, and this component seems to do exactly what I need, but I can’t figure out how to use it. I’ve added the .swc file to my project but when I use the AutoComplete tag, it seems to be missing some attributes (e.g. isMultiSelect, multiSelectLayout). Am I using it wrong?
    Where can I find the closed component (only the AutoComplete)?

    Thanks,
    Ofir

    1. Ofir,

      I’d check that you’ve included the namespace, you should have something like

      xmlns:components=”com.hillelcoren.components.*”

      I’d also suggest referencing the samples in the examples folder to see how to use the component.

  3. Hi Hillel,
    great component!
    Question: I need to use it on a very large set of words (~100K), and it wouldn’t make sense to load it all from memory.
    Is there a way to plug to the autocomplete component a web-service client to fetch the data interactively?

    1. Dan,

      There’s a file called DynamicData.mxml in the examples folder which runs through how to make this work. It uses a timer to simulate a server request but the basic idea is the same. Let me know if you run into any issues.

  4. My scenario: I type a few letters into the AutoComplete field, choose the desired item, then hit tab/enter. At this point, inside of the function that handles the “change” event, I can retrieve my ‘item data Object’ from either selectedItem or selectedItems[0]. (Neither is null and both hold the Object I’m looking for.)

    However, if my preference is to ignore the “change” event, and simply wait for my user to click on my “Submit changes to database” button, at that point both selectedItem and selectedItems[0] return null. So, I seem unable to retrieve the selected Object unless I’m willing to grab it inside the “change” event handler.

    Am I going about something incorrectly?

    Thank you!

    1. RP,

      You should be able to do that. If you can send me some sample code showing how you’re using it I’d be happy to help you debug it.

  5. Hello, I am trying to create a Clear all Fields on a form that us using the AdvancedAutoCompelete I was using autoField.textInput.textInput.text = “”
    to clear the text of the field but if the user had selected a value from the completion list it places at facebook circle and x around the selected value. How do clear the facebook circle.

    1. John,

      To clear the AutoComplete you’re going to want to use the following

      autoField.searchText = null;
      autoField.selectedItems.removeAll();

      The reason for this is that If multiple selection is enabled the component can contain both selectedItems and a search string.

      Best,
      Hillel

  6. Hello, I added the following to the AdvancedAutoComplete to expose these properties to the mxml tag and added a clear method.

    public function set textInputMaxChars(maxChars:Number):void {
    textInput.textInput.maxChars = maxChars;
    }

    public function set restrict(restriction:String):void {
    textInput.textInput.restrict = restriction;
    }

    public function clear():void {
    searchText = null;
    selectedItems.removeAll();
    }

  7. Hi,

    Your component looks really nice!

    I just wonder why are you using MXML to extend components with single Script tag inside?

    I think that using ActionScript 3 files (*.as) in such case is better solution: compilation is faster, FB supports organizing imports for *.as files and the code isn’t indented so much thus it is easier to read.

    For example AdvancedAutoComplete code could be converted to ActionScript component by simply extending AutoComplete class, copying the content of Script tag to newly created class and calling init() inside constructor.

    Hope this tips will help you to make your AutoComplete even better 🙂

    Cheers,
    Iwo Banaś

    1. Iwo,

      Thanks for the suggestion. The reason I’ve used MXML files is b/c I use the convention that visual components are MXML while non-visual components are ActionScript files. In most cases using MXML files makes it far easier to create visual components (although you’re right that it adds no benefit in the case of the AdvancedAutoComplete class).

  8. I’ve found a small bug (in my opinion anyway) that I think could be resolved fairly easily. I’m using the regular autocomplete component without multiple selection and have items which contain commas (specifically people’s names in ‘last, first’ format). The problem is that in handleFlowBoxChange you always split on commas to check for multiple items.

    I’ve modded my copy to only do this if allowMultipleSelection is true. I think it would be worthwhile for you to make this change in your next release. Also — would you prefer if people submit issues directly against the google code project?

    -Peter

    P.S. On a related note to make this sort of thing less of a problem (in the case of multiple selection) it would be nice if you provided a setter for selection delimiter.

    1. Peter,

      Thanks for the feedback. I had initially thought that a comma in the string would be an edge case but I’m hearing from more and more people that they this is an issue for them. I agree that you should be able to specify the delimiter. I’ll implement this in the next release.

      My preference is that people submit bugs as comments in the post for the version they’re using. I mainly use the google code project as a subversion repository.

      Thanks,
      Hillel

      1. Thanks for the excellent Diagnosis and fix, Peter. I’ve used your work around in the meantime, as the component being able to support commas is essential for our application. Our input is primarily numeric ranges, so naturally we want our users to be able to use commas to delineate thousands. Thanks for all the great work on this component, I’m looking forward to the next release, so I don’t have to maintain my own branch of the source 🙂

  9. I found an irritating bug. When ‘allowMultiple’ is true, you can sometimes select an item more than once (event hough ‘allowDuplicates’ is defaulted to false).
    This can not be easily reproduced, but try this:
    – assume there’s a list with values A,B,C
    – hit inline button and choose A
    – hit inline button and choose B
    – this part is tricky: Open the list by clicking the inline button, then quickly put cursor in the end of the line and hit BACKSPACE to delete B. then quickly select A again.
    Sometimes you will see A, A.

    Note that it is only a visual bug, because the selected items are actually correct (different objects). Something to do with renderers. Could you please take a look? This is the only thing preventing me from using this wonderful component.

    1. Platus,

      I’m sorry, I’m having trouble replicating your issue. In the last step, when I put the cursor at the end of the line the drop down menu disappears. When you say “quckly select A again” are you selecting it from the drop down?

  10. Hi Hillel,

    This is a great component, it works really nice in my application!! I was just wondering if there is a way in which the user could be able to look in more than one ‘labelField’? In my application, sometimes the user remembers only a word, but he/she doesn’t necesarily know if it is part of the name, lastname, or any other ‘labelField’ that may exist in the DataGrid.

    Hope you may answer.

    And thanks for sharing this component =) !!!

    1. Cindy,

      To enable searching by more than one field you’re going to want to implement a custom filterFunction. You’re also going to probably want to use a custom labelFunction as well (so the user can see all the fields) as well as a custom dropDownLabelFunction (to highlight the part of the item which matches). Here’s a basic example.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      	xmlns:mx="http://www.adobe.com/2006/mxml" 
      	xmlns:components="com.hillelcoren.components.*">
      
      	<mx:Script>
      		<!&#91;CDATA&#91;
      			import com.hillelcoren.utils.StringUtils;
      			import mx.collections.ArrayCollection;
      	
      			&#91;Bindable&#93;
      			private var _data:ArrayCollection = new ArrayCollection(&#91; 
      				{ name:"bob", dept:"sales" },
      				{ name:"dan", dept:"support" },
      				{ name:"sue", dept:"finance" }
      			&#93;);
      	
      			private function filterFunction( item:Object, searchStr:String ):Boolean
      			{
      				return (StringUtils.anyWordBeginsWith( item.name, searchStr )
      					|| StringUtils.anyWordBeginsWith( item.dept, searchStr ));
      			}		
      			
      			private function labelFunction( item:Object ):String
      			{
      				return item.name + " - " + item.dept;
      			}
      			
      			private function dropDownLabelFunction( item:Object ):String
      			{
      				var searchStr:String = autoComplete.searchText;
      				
      				if (StringUtils.anyWordBeginsWith( item.name, searchStr ))
      				{
      					return StringUtils.highlighMatch( item.name, searchStr, AutoComplete.MATCH_WORD ) + " - " + item.dept;
      				}
      				else
      				{
      					return item.name + " - " + StringUtils.highlighMatch( item.dept, searchStr, AutoComplete.MATCH_WORD );	
      				}				
      			}
      			
      		&#93;&#93;>
      	</mx:Script>
      	
      	<components:AutoComplete id="autoComplete"
      		dataProvider="{ _data }" dropDownLabelFunction="dropDownLabelFunction"
      		filterFunction="filterFunction" labelFunction="labelFunction"/>		
      
      </mx:Application>
      

      Let me know if any of this is unclear,
      Hillel

      1. Thanks a ton!!!

        Everything is clear and it was really helpful. Again, thanks a lot for answering =)!!

        Regards,
        Cindy

  11. Hi Hillel – great component – I’m using it for a project and it’s exactly what I was looking for!

    One question – what code can I change to place the TextInput bar above the selected items list in the advanced autocomplete component when the layout is vertical? (as opposed to below)

    Thank you!

    1. Michael,

      There’s no clean way to do this w/o modifying the source code, but…. here’s a hack solution (add this inside a creationComplete handler).

      autoComplete.setChildIndex( autoComplete.mainGridRow, 0 );
      autoComplete.mainGridRow.setStyle( "paddingBottom", 1 );
      
  12. I may be missing something really obvious here, but is there an easy way to make the rows shorter? They seem kind of tall for displaying a single line of text. I looked in the source and tried manually setting the rowHeight property of the dropdown list on init, but this made the rows shorter and also cut off the text (in some cases making it completely invisible). Oddly enough, if I change the line setting the ItemRenderer to set it as an ItemEditor, it lines up correctly with the shorter rows (although this causes other issues). Is there just a property somewhere I missed?

    1. Tom,

      I assume you’re talking about the rows in the drop down. It’s just a regular List component so pretty much whatever you’d do for a List you can do in the AutoComplete. One solution may be to use a custom item renderer (as is seen in the color chooser demo). That’ll give you a lot more control over each row.

  13. truely a great component man, really usefull! I had a question tho, is it possible to reset it too? For example when going back and forward to a page, can the component be reset to show the prompt text? Thx in advance!

    1. Brecht,

      To reset it you need to call the following (I’m going to add a clear() method in the next release).

      autoComplete.searchText = null;
      autoComplete.selectedItems.removeAll();

      Once it’s clear you just need to make sure it doesn’t have the focus for the prompt to be displayed.

      1. Hi Hillel

        where i need to use the autoComplete.searchText = null; & autoComplete.selectedItems.removeAll();

        i am using your actionscript file and in my mxml file i created the combo like below.

        So in init() of mxml i am writing matchCodeID.searchText = null;
        matchCodeID.selectedItems.removeAll();

        Then there is a error access of possible undefined property searchText & selectedItems.

        Please let me know which place i want to use the reset or clear.

        Thanks
        Harish

  14. Hi,

    I’m using FB 3 with Flash 10 (tried SDKs 3.2, 3.3 and 3.4). When I select an item in the drop list the text is not copied to the input control. I reinstalled Flash 9 and it worked correctly. Can someone verify this problem? I’m using other Flash 10 functionality and I’d really like to be able to use this component. Thanks!

    1. Eric,

      I was made aware of this issue right after releasing the 1.0 version of the component. I’ve checked in a fix to the google code site, you’ll need to do a checkout of the codebase and use that SWC.

      Let me know if you have any issues,
      Hillel

      1. Hi,

        I am also having the same problem. I have just downloaded the latest version from Google Code and put it into a project that had an earlier version of the AutoComplete component. When I use the Mouse the text is copied into the input control but not when using the enter key. As with Eric above – it works fine in Flash 9, just not Flash 10.
        Can you please point me in the right direction.

        Thanks
        Scott

      2. Scott,

        Before I look in to this I just want to make sure that you did a checkout of the codebase (rather than downloading the zip file on the google code site).

  15. Hi,

    I am wondering why this component which has the functionality of a dropdown doesn’t look like a dropdown. It looks like a text input. It would be nice to optionally add the standard triangle of a dropdown so the user knows how to display a list of the values

    I really like this component and I am considering to use it in my current project.

    Good job

    1. Ropo,

      I plan to add this to the component in the future. For now, at the very end of the documentation there’s an example showing how you can use the inlineButton property to implement this feature.

  16. Hi,
    I’m trying to use the style “faceBook” in the AdvancedAutoComplete and it’s not working here.
    acording to the api the way to do this is like this:
    styleName=”{AutoComplete.STYLE_FACEBOOK}”
    but it has no effect..

  17. Hi,

    Firstly I would like to say thanks for providing this EXTREMELY useful component. The documentation and functionality is amongst the best! Good Job!

    My question is that I really want to use the browse functionality that you showcased in your demo to use with the actionsMenuDataProvider. I am having problems with figuring out the code to get that functionality working. So what code can I use to enable that feature?

    Thanks again,
    Brandon

    1. Brandon,

      To use the actions menu feature I’d recommend checking out the AdvancedDemo.mxml file in the examples folder of the download.

      Let me know if you have any trouble getting it working,
      Hillel

  18. Hello. Quick question. I’ve been trying to use this (basic autocomplete) but going around in circles.

    I have a form that needs to be pre-populated with data so I do the following (on initialization):

    autoCompleteControl.text = model.myValue

    I then watch for any changes so that they can be copied back to the model (also in initialization)

    BindingUtils.bindSetter(inputUpdated, autoCompleteControl, [“text”], true);

    private function inputUpdated(newValue:String):void
    {
    // Copy changes back to the model
    model.myValue = newValue;
    }

    However, when the binding first triggers the setter, the property “text” on the autocomplete control is empty (or null) – reading the source code I can kind of see why this is happening but would still expect it to be whatever mymodel.value contained.

    Basically, I also tried using the searchText property too but that has other issues.

    Essentially, when the form is displayed, I need the autocomplete field to be pre-populated from the model. If what is prepopulated happens to be a match I need the field to be styled accordingly e.g. macmail and if there isn’t a match, well it just looks as if the text has been typed in.

    At the same time, I need the changes reflected back into the model (via Actionscript using bindSetter)

    Any advice on how to go about getting this to work would be greatly appreciated.

    1. Fred,

      To preselect items (as well as storing new items) I’d suggest using the selectedItems property. Here’s a basic example.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      	xmlns:mx="http://www.adobe.com/2006/mxml" 
      	xmlns:components="com.hillelcoren.components.*"
      	verticalAlign="middle" horizontalAlign="center">
      	
      	<mx:Script>
      		<!&#91;CDATA&#91;
      			import mx.collections.ArrayCollection;
      			
      			&#91;Bindable&#93;
      			private var _data:ArrayCollection = new ArrayCollection( &#91;"one","two","three"&#93; );
      					
      			&#91;Bindable&#93;
      			private var _selected:ArrayCollection = new ArrayCollection( &#91;"one"&#93; );
      					
      			private function handleChange():void
      			{
      				trace(">> selected: " + autoComplete.selectedItems.source );
      			}
      			
      		&#93;&#93;>
      	</mx:Script>
      	
      	<components:AutoComplete id="autoComplete" dataProvider="{ _data }" 
      		selectedItems="{ _selected }" change="handleChange()"/>
      	
      </mx:Application>
      
      1. Dear Hillel,

        Thanks for responding to this but your hints don’t really address the issues I’m having. Perhaps I didn’t explain myself properly.

        If I illustrate with an example perhaps that will make things clearer.

        Suppose there is a list as the the data provider for the component: Apple, Banana

        If the model contains: “Foo” then when the control is loaded and populated with the text “Foo” by setting the text property of the control, it should be available when bindings are run. It is not. The text property is empty/null. The textInput.text property is similarly empty/null.

        This is distinctly different behavior to how a normal TextInput control behaves e.g.

        autoCompleteControl.text = “Foo”;
        normalTextInputControl.text = “Foo”;

        BindingUtils.bindSetter(inputUpdated, autoCompleteControl, [“text”], true);

        BindingUtils.bindSetter(input2Updated, normalTextInputControl, [“text”], true);

        When the first setter is run, the value of the autoCompleteControl text and textInput.text properties is emtpy/null

        When the second setter is run with the normal text input control, the text property contains the expected value of “foo”.

        ——————————————-

        The SECOND issue is the following. Suppose the model now contains “Apple”, I want the auto complete control to automatically set the selected item on the control that matches. Your suggestion is to set the selectedItems property on the control but in order to do that I have to loop through the data provider on the control and then grab the object that matches, if there is one, and then set the selectedItem(s) property with that object.

        This is all well and good but doesn’t the component already have the code to do this matching? It seems a duplication of effort to have to write this code “outside” of the component in order to set the selectedItem(s) property.

        The data provider may contain semi-complex objects in the collection and I simply want to match on a string read from the model i.e. exactly what the component already does internally.

        Hope you can help.

        Regards,

        Fred.

      2. Fred,

        1) Since the component can contain both items and a search string (if multiSelect is enabled) I’ve needed to create a special searchText property. You can see more info on in the documentation, here’s an example which demonstrates the difference.

        2) In order to have the component search for the item you can use the selectedItemId property. It assumes the item is identified by an “id” field but you can specify the field using the keyField property.

        Hope this helps,
        Hillel

  19. Hi Hillel,

    first, this is a really great component, that really helps a lot.

    Second, I have a problem with AdvancedAutoComplete.
    I want to preselect one entry of the list.

    I build the dataprovider using some:

    _allMyContacts.addItem( { name:s_name,ID:i_myContactID });
    autoCompleteContacts.dataProvider = _allMyContacts;

    I preselect one entry by:
    autoCompleteContacts.selectedItems.addItem( {name: s_recipientName, ID: parseInt(s_contactID)} );

    So I get the correct entry in the selected items panel.

    But, even I configured allowDuplicates=false, I can select the same entry a again, so that I get two identical entries.

    What am I missing?

    Best regards,
    Oliver

    1. Oliver,

      I think you’re problem is that when you add an item to selectedItems it needs to be a reference to the original object. In your code you’re creating the object twice (rather than using a reference to the first object) so it won’t consider the second object a duplicate.

  20. Hello,

    Really great component, congratulations! I’m trying to use it with a dark themed application, changing it’s background color but couldn’t do it. I changed it using source code but some spots continue white. Is there any trick to do that?

  21. I tried a little more and made it work. It’s not using styles yet but the background color now is defined in Consts.BACKGROUND_COLOR. Thanks for the great component. I can send the code changed if you want, but I that it easy to implement.

      1. Could you by any chance post some hints about this?
        I’d like to do the same 🙂
        Also, how do you change the background alpha of the text input?

        Thanks a lot
        Stix

      2. Stix,

        It isn’t the prettiest code, but it seems to work…

        autoComplete.flowBox.setStyle( “backgroundColor”, null );
        autoComplete.textInput.setStyle( “backgroundColor”, null );
        autoComplete.textInput.textInput.setStyle( “backgroundAlpha”, “.5” );

  22. Hi Hillel,

    thanks a lot for your support.
    You are right, I created 2 objects, that was the problem. Now it is working really fine.

    Thanks again, Oliver

  23. Hillel,

    Thank you for posting this component. I really like the work you’ve done here, and I much prefer this control over the one that Adobe had released.

    I was wondering if you knew if there would be an easy way to make the list stay open to allow for the user to interact with the list. When a user sees the dropDown, we have a custom renderer that has 3 controls on it. It has a checkbox (used for favoriting list items so they are filterred to the top), a delete button and finally if they select the row that item becomes selected to work with in the application.

    My users want to be able to display the dropDown, but want to be able to select as many check boxes as they want to filter their favorites to the top of the list. Currently, if they select, the list closes.

    Other than that this is a very good component and if I can find an elegant solution to keep that dropDown open even if a selection event occurred – then it will be perfect. Any insight you may give will be appreciated.

    Thanks,
    Levi

    1. Levi,

      I’m sorry, while I don’t think it’d be too hard to implement there’s no “keep drop down open” flag.

      If you want to implement this you could use the source code. You’d want to check each call to hideDropDown() in AutoComplete.mxml (and remove the ones you don’t want called).

  24. This is an excellent control!! It’s been very easy to implement and it’s extremely powerful! It’s going to save me a ton of time in writing something like this myself. I’m pretty new to flex (not to programming though) and this is the best component I’ve ran into!

    A couple of quick questions,

    1. With the AdvancedAutoComplete, I’m passing in an array collection with a label, a code, and a description. The label is a combination of the description and code, for example – “United States (USA)”. I set the labelField = “label” and the browserFields to show description and code. After a user has selected something, the text attribute of the component is set to the label value. I was looking to see if there was some sort of “keyValue” attribute that could be set to return a different field from the array collection than the label (in my case, the code field “USA” vs “United States (USA)” that the user selected. Granted, I could search the array collection after the fact, but I thought I’d suggest (assuming it’s not already there and I missed it) the ability to optionally specify a different return item from the array collection.

    2. I’m considering using ListBuilder directly, since you mention that it is a “First Class Component”. One thing I might attempt to change in it is change it to data grids on each side, because I have a number of elements I want to show. I sort of want to have two “browse” data grids side by side. I haven’t looked at the code yet, but do think something like that would be relatively easy to do, or should I start from scratch? (Or is there another component out there that already does this with data grids?)

    Again, a great component, and suprised, and happy, that it’s freeware!

    1. 1. I think the answer there is to use the labelFunction property to define a custom function.

      2. I’ve just checked over the code. It should be pretty straight forward to modify it from lists to dataGrids. Let me know if you need any help getting it working.

      Thanks for the kind words,
      Hillel

  25. Hi,
    thanks for your component it is really great.

    I was wondering if you knew an easy way to make the itemEditor and itemRenderer communicate in an easy way.

    Let’s explain, I use the autocomplete in the itemEditor in a advancedDataGrid. The autocomplete receives an ArrayCollection where I just want to show the IDs of it (not the rest who is inside). On the other side the ItemRenderer should also only show this IDs seperated by a comma (for example).
    I also have a strange but when the user types a value that is not in the ArrayCollection that I gave as input to the Autocomple it will “hide” all the other rows of my AdvancedDataGrid.

    Thanks in advance,
    Leo

    1. Leo,

      I’m sorry, I’m not sure that I understand what you’re trying to implement. This sounds like it may require changes to the dataGrid (to implement the hide feature).

      1. I am just trying to implement the autocomplete in a datagrid but
        – the autocomplete can already have values (objects) at the begining,
        – this values should be kept an possibilities to add new values (dynamic values added to the dataprovider)
        – display it after focus out in a more “readable” way

        I hope it sounds more clearer 🙂

      2. Leo,

        Have you checked out the DataGridDemo.mxml file in the examples folder, it should answer some of these questions.

        What do you mean by “more readable way”

  26. Hillel,

    I am working on similar kind of auto populate component but i get data from DB based on user input, i thought of using your components. it works fine in many cases. But the problem i am facing is once i get the data i am assigning to this component but not able to see the drop down immediately, so how can i open drop down once i get the data from DB…
    I force user to enter minimum 3 characters,

    Regards,

    Naren

  27. Hillel,

    Thank you for publishing the component it has been great for our application. It is probably a simple matter but how do you in actionscript set the Autocomplete component to show the prompt after a search and select.
    To be clearer:
    The user enters the search characters and selects an item from drop down. The application does a task, and when this task is finished the Autocomplete should be reset to show the prompt again.

    Thank you
    Haluk

    1. Haluk,

      Here’s the code to clear the component (I plan on adding a clear function in the next version).

      autoComplete.searchText = null;
      autoComplete.selectedItems.removeAll();

      1. Hillel,
        Thank you kindly.
        It is exactly what I needed. This component is wonderful and you have been very kind to help all of us. The component is of commercial value.
        Keep up the excellent work.

  28. Hillel;

    Nice component. I am including it in a project I am working on.

    I would like to know how I can access the ListBuilder properties such as ‘title’, ‘fontSize’ (for the sub components), setFocus() etc.

    Thanks agian.

    1. Nolan,

      Most of the properties for the ListBuilder aren’t directly accessible through the component. The simplest solution would be to use the source and make the modifications directly.

  29. Hi,

    I have downloaded your component. Please tell me how to use it. Where should I place it in my project folder. Which file should I place.

    Is there a .svc file in your component which I can place in libs folder.

    Please help. I am really new to flex 3.

    Regards,
    Pooja

  30. Love the component, we plan on using it in our application. I have been having trouble skinning the component however. I have tried to apply styles to the text input box but doesn’t seem to be working. I did something as simple as changing the border colors of the box, but it only renders the bottom and right borders of the input box.

    I also tried skinning using some graphical assets but no luck

    Do you have any suggestions?

    1. Rich,

      The top level component of the AutoComplete is a Grid (which is just used for layout). If you want to change the border try applying the changes to the flowBox child component.

  31. Hi Hillel,
    you’ve done a really great job with this component! It’s awesome. However, I can’t find a way of configuring it so that no item is selected when the dropdown is rendered. Can you tell how this can be achieved?

    Thanks in advance,
    RisteV

    1. RisteV,

      Thanks, happy you like it. You’ll need to modify the sourcecode to accomplish this. There’s a function initDropDown in AutoComplete.mxml, you’ll want to remove the line which sets the selectedIndex to 0. I believe you’ll also need to change the enter click handlers (in handleKeyDown) to check for when the user clicks enter but hasn’t selected an item.

      Let me know if you run into any issues getting this working

  32. Hi Hillel,

    I really love this component, it blows the pant off of the Adobe one.

    Does your Google Code site have the latest version? I only ask because when I build a component with that SVN I end up with selectedItemStyleName not being implemented. I only ask because I made some modifications to the Advanced Auto Complete for a project I am working on. Changes like adding a remove all button to the vertical layout list. Custom Icons on for the browser/remove/remove all button. Custom list height for vertical layout. Custom min width and height for the buttons mentioned above.

    When I run the swic AutoComplete-1.0.swc everything runs fine but when I run from the SVN the style does not propigate.

    1. Chris,

      Are you using the SWC in both cases. I set the style for the AutoComplete in the defaults.css file. I’ve seen cases where it isn’t automatically included when using the source. The workaround is to manually include the defaults file using a style tag.

      1. Of course! That makes perfect sense, turns out it was as simple as going to the assets tab in the flex library build path then selecting the css. It was quite frustrating. Thanks for your help, if you are interested in any of the customizations I made please let me know as I would be happy to share them.

        Chris

  33. Hillel,
    This is a great component and appreciate your effort. I’d like to bring up a small issue that I noticed.
    If the width is not specified in terms of fixed pixels, search/prompt string is not displayed at all.

    Sorry, formatting is ignored by this editor.

    thanks

    1. Mantra,

      I’m sorry, I’m not able to replicate your problem. Here’s the simple test I tried, the prompt was visible for both of them.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application 
      	xmlns:mx="http://www.adobe.com/2006/mxml" 
      	xmlns:components="com.hillelcoren.components.*">
      			
      	<mx:VBox>
      		<components:AutoComplete prompt="test" width="100"/>
      		<components:AutoComplete prompt="test" width="100%"/>		
      	</mx:VBox>	
      		
      </mx:Application>
      
  34. I am just starting to learn Flex. I’ve looked a few of the available autocomplete implementation and this component looks like it will meet my needs the best.

    I’ve run the examples from your site, but would like to play with them in Flex Builder. Sorry for such a total newbie question, but will your Download import into FlexBuilder and run without modification? I managed to import the files in AutoComplete.zip into an empty project but running the various .mxml files simply displayed empty pages.

    1. Brad,

      If you’re just getting started with Flex I’d recommend you use the SWC rather than the source code. It’s located in the bin folder of the download, you should just need to add it to the lib folder of your project to use the component.

  35. Hi,

    sorry I was away for a few weeks but my problem is that I have an itemEditEnd event in the advancedDatagrid and this makes me always an event error when I press enter in the autocomplete.

    1. Leo,

      I’d check to make sure you specify editorUsesEnterKey=”true” in the DataGridColumn. The DataGridDemo.mxml file in the examples folder provides a good overview of what needs to be set when using the component in a DataGrid.

      Hope this helps…

      1. Hi,
        I checked the datagriddemo.mxml and it helped me but I use an external file as itemEditor. So now I don’t receive a value after the user enters something with autocomplete. the column says empty after input

      2. Leo,

        The component is currently freeware, you can use it anyway you like. I’m not sure about your datagrid issue, if you could create a sample application which demonstrates your problem I’d be happy to help debug it.

      3. Leo,

        Email would be great, my address is on the contact page.

        I currently use the Mate framework for all of my apps. I haven’t tested with the Pure MVC framework but I used to use it (so I’m familiar with it), I wouldn’t foresee there being any problems.

      4. I don’t understand why the extra space is added at the end of this line in the StringUtils.highlightMatch function….

        but I removed the space at the end because I am doing a special dropDownLabeler…. I’m splitting the email@address.com on the @ so that I can only pass the name portion (not the domain) to the highlighter… then I append the “@address.com” back on to the result from the highlighter, but it is failing because the highlighter is adding that extra space.

        Thanks!
        – Matthew

        returnStr += string.substr( matchPos + searchStr.length, string.length ) + ” “;

      5. Matthew,

        That’s a mistake, I’m going to remove it in the next release.

        Sorry for any trouble it caused you,
        Hillel

      6. I don’t know if you saw this posted earlier, so I’m reposting…. 🙂

        Rewrote positionActionsMenu in AdvanceAutoComplete, so that if I change the addChildAt(_multiSelect, 0) to addChild(_multiSelect) to put the list below the flowbox…..

        // —————————————-
        private function positionActionsMenu():void
        {
        if (!_actionsMenu) return;

        // Adjust 0,0 of this component to global location so we can place the popup there.
        var localPoint:Point = new Point( 0, 0 );
        var globalPoint:Point = localToGlobal( localPoint );

        // Get padding information for slight nudging.
        var vm:EdgeMetrics = flowBox.viewMetricsAndPadding;

        // mainGridRow.xy contains the offset within this component.
        // flowbox.xy contains the offset within the mainGridRow
        // vm is used for nudging.
        globalPoint.x += this.mainGridRow.x + this.flowBox.x + vm.left;
        globalPoint.y += this.mainGridRow.y + this.flowBox.y – vm.top;

        // Adjust for vertical scrollbar.
        if (flowBox.verticalScrollBar) globalPoint.x -= 16;

        _actionsMenu.x = globalPoint.x;
        _actionsMenu.y = globalPoint.y;
        }

  36. Hillel,

    I wrote you earlier about a possible “searchField” extension. I have done it and would be happy to show you if you are interested.

    I have a new question. Would it be possible to extend the component to do “a litle more” when allowNewValues=”false” ? If I type a new value and press tab the text remains there. It would be good to prohibit typing or clear the text on focus out when there is no matching item.

    Thanks,
    Andras

    1. Andras,

      It shouldn’t be too hard to remove the item on focus out. Try adding a focus out event listener and then check if the searchText property is set but the selectedItem property is null.

      1. Andras,

        The issue here is that the component inherits from Grid. The Grid class (along with it looks like all container class) have metadata which excludes the focusIn/Out events (along with others). Although they’re excluded they still work. For example:

        autoComplete.addEventListener( FocusEvent.FOCUS_IN, handleFocusIn );
        autoComplete.addEventListener( FocusEvent.FOCUS_OUT, handleFocusOut );

      2. // PromptTextInput.mxml – Made the following function public so we can reset the prompt at will.
        public function showPrompt():void

        //For example: when we want to start fresh and clear everything….

        this.autoComplete.selectedItems.removeAll(); // Remove the current selections.
        this.autoComplete.textInput.showPrompt(); // Clear any search text that was typed and show the prompt.

      3. FYI, I had to do that because originally I tried the following line:

        this.autoComplete.searchText = null;

        My sequence had the promptTextInput redisplaying the prompt but the setStyles were not working so the prompt was not light grey and italicized even though it was displayed….

        Here’s my sequence:

        1) Type a few characters into the promptTextInput
        2) Click on a button in my app that calls a handler that makes the following call:
        this.autoComplete.searchText = null;

        At this point, the handleFocusOut function was called before my call to set searchText to null. The prompt is not shown yet because there is still searchText. You designed this so that we can click off the autocomplete and our searchtext will stay there in case we want to come back and type more. We’d have to remove the “if (textInput.text.length == 0)” for the prompt to always show on focus out, but I like the way you wrote it better.

        So after the handleFocusOut happens, then the “set searchText” call on the autoComplete takes place which has the “textInput.validateNow();” call.

        3) commitProperties is called, which then calls “textInput.text = _text;” which then sets “_textChanged = true” and calls invalidateProperties.

        4) PromptTextInput.commitProperties is called which calls setNewText, which detects that our text is now null, so it calls showPrompt, which displays the prompt and sets the styles…..which is where the problem is, for some reason the prompt is displayed without the styles.

        I couldn’t figure it out, so I made the showPrompt call public and call it directly instead of setting the searchText on the autocomplete object.

        I hope this makes sense…..

      4. Matthew,

        Thanks very much for the detailed description, that’s really helpful. I’ll implement a fix for the issue in the next release.

        Best,
        Hillel

      5. Matthew,

        I’m working on putting together the next version (which means I go through all bugs/fixes posted since the last version). I think I’ve figured out this issue. I’ve changed the PromptTextInput so it calls textInput.setStyle() and it seems to work as expected. Not quite sure why this is required but it works…

        Thanks for raising my attention to this issue. I won’t include the showPrompt function in the next version but setting the text to null should just work.

        Best,
        Hillel

      6. Hi Hillel,

        That’s great news. Good job. I added an A-Z sort button to the multiselect buttons. Are you interested in the code?

        Please tell me your time frame. I have a lot of feedback to share with you that you may wish to implement but I need to put it all together in a nice document for you and I need to know how much time before you plan to release this next version so I can prioritize.

        – Matthew

      7. Matthew,

        I’m not sure if I’d add an A-Z to the codebase but it’d be great if you could post it to the blog (maybe somewhat else could use it).

        I’d guess I’ll have the next version in a couple of weeks, so you’ve got a bit of time.

        Look forward to your feedback,
        Hillel

  37. Rewrote positionActionsMenu in AdvanceAutoComplete, so that if I change the addChildAt(_multiSelect, 0) to addChild(_multiSelect) to put the list below the flowbox…..

    // —————————————-
    private function positionActionsMenu():void
    {
    if (!_actionsMenu) return;

    // Adjust 0,0 of this component to global location so we can place the popup there.
    var localPoint:Point = new Point( 0, 0 );
    var globalPoint:Point = localToGlobal( localPoint );

    // Get padding information for slight nudging.
    var vm:EdgeMetrics = flowBox.viewMetricsAndPadding;

    // mainGridRow.xy contains the offset within this component.
    // flowbox.xy contains the offset within the mainGridRow
    // vm is used for nudging.
    globalPoint.x += this.mainGridRow.x + this.flowBox.x + vm.left;
    globalPoint.y += this.mainGridRow.y + this.flowBox.y – vm.top;

    // Adjust for vertical scrollbar.
    if (flowBox.verticalScrollBar) globalPoint.x -= 16;

    _actionsMenu.x = globalPoint.x;
    _actionsMenu.y = globalPoint.y;
    }

  38. Hillel, great component! very well done.

    Question though, can the field only contain text and not item(s)? I’d like to somehow keep the searchString as text instead of it converting to an item that isn’t very easy to edit (a user has to delete it, then type again). My suggestion would work with only one item.

  39. Hillel,

    Can I use autocomplete to generate result like this

    I use autocomplete to be math function autocomplete
    input: user type MAX function and enter it will return MAX(x1, x2), user type + and add function MIN it will return MIN(x1,x2)

    output: MAX(x1,x2) + MIN(x1,x2)

    1. Herak,

      At the end of the documentation (in the inlineButton section) there’s an example which shows how you can add a button which will show the full list.

      1. Hi Hillel,

        I am getting the following exception when I click the inlineButton twice

        RangeError: Error #2006: The supplied index is out of bounds.
        at flash.display::DisplayObjectContainer/addChildAt()
        at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::
        rawChildren_addChildAt()[C:\autobuild\3.2.0\frameworks\projects\f
        ramework\src\mx\managers\SystemManager.as:2057]
        at mx.managers::SystemManager/addChild()[C:\autobuild\3.2.0\
        frameworks\projects\framework\src\mx\managers\SystemManager.as:1569]
        at mx.managers::PopUpManagerImpl/addPopUp()[C:\autobuild\3.2.0\
        frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:309]
        at mx.managers::PopUpManager$/addPopUp()[C:\autobuild\3.2.0\
        frameworks\projects\framework\src\mx\managers\PopUpManager.as:169]
        at com.hillelcoren.components::AutoComplete/showDropDown()[/Users/
        hillel/Code/flex-autocomplete/src/com/hillelcoren/components/AutoComplete.mxml:1178]
        at ColorDemo/handleButtonClick()[C:\Eng\Projects\ecw\TestApp\src\ColorDemo.mxml:213]
        at ColorDemo/___ColorDemo_Button1_click()

  40. I sincerely admire your effort to invent this superb component and that you give it for freely use.

    I think you can put license in it. It’s worth costing.
    Thank you for this great component anyway.

    By the way, I also got some problem like the others.

    My problem is that when the autocomplete found a search word and display the word within the component, I’d like it to show only string, not button style. I did try put selectedItemStyleName=”{}” (which could stand for “NONE” style but the result was also a common button)

    Is this possible to be done?

  41. Thanks for the control, nice work. I am using the control with a dynamic ArrayCollection that gets it data from a web service. Each time that I alter the ArrayCollection the typing area looses focus and the user must click the typing area to begin typing again. I have my web service update the collection after the search text is longer than 3 characters and for each character there after. Is there a way to keep the focus on the typing area?

    1. Aaron,

      There’s a file called DynamicData.mxml in the examples folder which I use to test these sorts of cases. In the example, I’m setting enabled to false when loading the data. This is (at least for me) is what’s causing it to lose focus. You could also try resetting the focus.

      autoComplete.setFocus();
      autoComplete.textInput.setTextSelected( false );

  42. when i select whole text in the AutoComplete and press DELETE and then press TAB, deleted item reappears on focusoutevent

    1. Yogesh,

      I’m having trouble replicating this, are you able to do it in the demo? Since you say you select the text I’m guessing you have it set to allowNewValues/newValuesAreEditable.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s