Flex AutoComplete: Almost there… (or so I thought)

If you’ve come straight to this post I’d recommend checking out the first and second posts for this component for more info on using it.

Latest version

Here’s what’s new:

  • Created new demos: I’ve added two more demos which demonstrate some common ways to use the component. The source for the demos is included in the zip.
  • Added support for a horizontal multiselect: The previous version of the component had a multiSelect mode but it took up a fair amount of screen real estate. I’ve added a multiSelectLayout property which can be set to either “vertical” or “horizontal”. Vertical makes it behave the same as it used to, while horizontal enables you to select multiple items within the TextInput component. I’ve added this option to the demo. I’m still working on this feature, in the next version I’d like to change the style to make it look like the multiselect in Facebook and Mac Mail
  • Improved support for selecting items not in the dataprovider: The best practice to accomplish this is to add a keyDown listener to the component. If the user clicked enter then check if the text property is set and the selectedItem property is null
  • Fixed minor bugs: I’ve gone through all the comments on the blog and tried to address any open issues. I’m sure I’ve missed some things, if you’ve made a suggestion in the past which didn’t make it in to this release please re-suggest it and I’ll try to get it into the next version

One last thing, I’ve added the component to the Adobe Flex Exchange. It’s a relativley new component so it doesn’t have any rating or reviews. If you’re using this component and find it useful it’d be very much appreciated if you could rate it on the site (or even better… write a review).

Thanks very much,
Hillel

92 thoughts on “Flex AutoComplete: Almost there… (or so I thought)”

  1. The solution for entering items not in the list works great, Hillel. Thanks very much for getting this out this weekend.

    The only problem I’ve run into is that a user can’t enter a new value that starts the same as an item in the list.

    To clarify, in your color demo try typing out “Awesome Green”. Since there’s a color in the list called “Awesome” it’ll get selected once you’ve typed that much out and the next keystroke destroys the text and selection.

    I’ll post back if I find a solution. Thanks again!

    1. Adam,

      Christophe actually came up with a good solution for the problem you’re having, simply create a function which always returns false and use it for the isEqualFunction property. In the next version I’ll simplify this by adding a property to disable this feature.

      Hope this helps,
      Hillel

  2. Hi,

    Great work! One thing I’m noticing is when you start entering text and an item is selected, keydown clears the box instead of selecting the item. You can select it with your mouse no problem. Does this have something to do with the control being in editable mode?

    Thanks!

    1. Jeff,

      I’m sorry, I’m not sure that I follow. If you enter text once an item is selected it will clear the text (even before the user hits the keydown button). Could you please explain your issue in a bit more detail.

      Thanks,
      Hillel

  3. Hillel,

    In my case, I’m using the component as an item editor in a datagrid, and I sub-classed it to override the set data function. It works well. It seems that a double click is required to actually be able to enter text and start to get matches. Single click gets me past the default itemrenderer, but doesn’t apparent get focus on the input portion of the control.

    Jeff

    1. Jeff,

      Have you checked out the datagrid example included in the zip file, the way I’m using it I don’t seem to be having the same problem. In either case if you could email an example of your code I’d like to test it out (I think it’s pretty important that the component gets the focus on single click).

      Thanks for your help,
      Hillel

  4. Hillel,

    I’ve been looking at the datagrid example and trying to identify what I’m doing differently. The first thing is that I’ve subclassed the component to meet my precise needs, overriding the set data function and so forth. Just to clarify what happens on the first mouse click – the editor becomes visible but the mouse cursor isn’t visible. It requires a second click to get the cursor into the text field. It’s not a huge deal from a usability perpsective.

    I’m going to continue working on it, and I’ll let you know what I find. The code is deep in the middle of the app so isn’t very conducive to being taken out of context and sent to you.

    Thanks.

    Jeff

  5. Hillel,

    First, thanks for your component! It is much better than any other. I’m having trouble however pre-populating the selectedItem/Items. Essentially I need to set some initially selected items a vertical multiselect chooser. Is there a way to do this using selectedItems?

    Thanks!
    Kevin

  6. Hillel,

    I managed to figure out the use of selectedItem/Items once I used the keyField option. I also noticed the selectedItemId function. Is there plans for a selectedItemIds?

    1. Kevin,

      Adding support for selectedItemIds is a good idea, it shouldn’t be too hard to implement. I’ll build it into the next release.

      Thanks,
      Hillel

  7. Hillel,

    Thanks for your work! It’s really a great component.

    I’m planning to use it with a dynamic dataprovider: at each keystroke, a request is sent to the server (using a RemoteObject) and the dataprovider is replaced with a new set of values.
    I’m facing some problems, if I hit “delete” key for example: I type “ado” and the component propose “adobe”, then I hit “delete” and there seems to be a problem, with the dataprovider. Could you give a sample using the component with a remote object (and dynamic dataprovider), or some indications? I think the problems arise when an item is selected in the list and the dataprovider changes.
    I’ll continue my tests and will provide a solution if I find one.

    Thanks again for this great work!
    Cyril

    1. Cyril,

      I haven’t used the component this way myself, but I’ve heard from a number of people who are using it this way and it seems to be working for them. Could you email me the error you’re getting, I’ll try to help you figure out where the problem is.

      Thanks,
      Hillel

  8. Hillel,

    I was wondering what the best method (or if there is a method) to limit what is displayed from the arrayCollection in the browse PopUp datagrid – of if there is the ability to change the width of the grid?

    Thanks!
    Mike

    PS – Great work!

  9. Hillel,

    Suppose the user has already selected items A, B, and C. Then the user selects item D. I want to remove items A and B from the list of selected items.

    I have tried building an ArrayCollection with just items C and D and calling the selectedItems setter but that throws the following error.

    ReferenceError: Error #1069: Property id not found on MY_CLASS and there is no default value.
    at ara.controls.autocomplete::AutoCompleteChooser/commitProperties()[C:\EMST\ARAFlexLibrary\src\ara\controls\autocomplete\AutoCompleteChooser.mxml:279]

    I have also tried just removing items A and B from the selectedItems ArrayCollection. However, items A and B were still displayed (although they would sometimes disappear as I continued to manipulated the control).

    Thanks,
    Ed

    1. I see the problem here. When setting items using the selectedItems property we check if either the object is the same or the keyField of the object matches. By default the keyField is set to “id”. In the next version I’ll add a check to make sure that the item has a property called “id” before using it to check if we should select the item.

      For now, setting the keyField property to a valid property of your object should solve your problem.

      Let me know if you have any trouble with this,
      Hillel

  10. Hillel,

    Thanks for the quick response. I will give that a shot. The dataProvider I’m giving your component contains several different types of objects. I’ll create a generic “id” field. I’m not sure if it is possible but it would be nice if your component didn’t require all objects in the dataprovider to have the same field.

    The PromptTextInput contains a TextInput object as expected. If you change that to be a TextArea your component no longer allows you to select items using the enter key. For whatever reason the TextInput dispatches a single change event whereas the TextArea dispatches 2 change events. I’m using a TextArea because I want the selections to “word wrap” similar to the way Facebooks widget works. If I figure out a solution to this I’ll post again.

    Thanks for your component, it is by far the best auto completion!

    Thanks,
    Ed

    1. Ed,

      Thanks so much for your great suggestions.

      I think I’ve got a solution for allowing objects to use different keyFields. We’ll remove the keyField property entirely and instead use the isEqualFunction. Currently, the isEqualFunction controls if the component will automatically resolve the text to an item. We’ll change this to a autoSelect property with three settings: off, use isEqualFunction and select if only one match.

      I haven’t tried using a TextArea for the PromptTextInput but that’s a really interesting idea as well.

      Thanks,
      Hillel

  11. Hillel,

    Thanks again for the great component. If anybody wants to replace the TextInput inside the PromptTextInput class you’ll have to disable the default behavior of the event that gets thrown when the Enter key is pressed:

    http://blog.flexexamples.com/2008/03/07/preventing-line-feeds-in-a-textarea-control-in-flex/

    Another nice feature to add to the TextArea is to have it grow in height as more items are added to it. Here is my AutoResizingTextArea class which does just that:

    public function AutoResizingTextArea()
    {
    super();
    this.addEventListener(Event.CHANGE, updateHeight, false, 0, true);
    this.addEventListener(“textChanged”, updateHeight, false, 0, true);
    this.addEventListener(“htmlTextChanged”, updateHeight, false, 0, true);
    }

    private function updateHeight(event:Event):void
    {
    if (textHeight >= 30)
    {
    var newHeight:Number = 10 + textHeight;
    if(newHeight <= maxHeight)
    {
    explicitHeight = newHeight;
    }
    }
    }

    1. Ed

      Thanks very much for figuring it out, I’ll be sure to include your changes in the next release.

      Best,
      Hillel

  12. Hi Hillel,

    Your component doesn’t support the events focusIn, focusOut… In some cases, we need to use this events. Can you support in the next version?

    Thanks!

  13. Hillel,

    I’ve checked and finding your component works well with ‘focusOut’. But in Flex Builer, when adding properties for chooser in mxml, can’t see events focusOut, focusIn.

    What’s the problem?

    Linhvu

    1. Linhvu,

      In the next release I’ll add the event metadata to support code completion in MXML.

      Thanks for pointing it out,
      Hillel

  14. It is a very nice component, great work.

    What I want to do is to use this component as how it happens in gmail “Compose Mail”. There are already some name/emails in my data provider however I want to add new emails (as I type) in PromptTextInput. What would be the way to do it ? Currently the component removes the email it did not find in its data provider.

    I’m using TextArea instead of TextInput in PromptTextInput.

    Thanks

    1. I’d like to use it the same way, I’m still working on the component and hope to be able to implement that functionality in a later release. I’m sorry, it’s hard for me to give a time frame as to when it’ll be done. If you’d like to try working on it yourself I’d be happy to provide as much help as possible (sorry… always trying to recruit people to the project), but I’m very understanding if you don’t have the time/interest.

      Best,
      Hillel

  15. yeah I need to implement this feature urgently. It lacks documentation or comments so its hard. Anyway isn’t the following what I’m talking about:

    Improved support for selecting items not in the dataprovider: The best practice to accomplish this is to add a keyDown listener to the component. If the user clicked enter then check if the text property is set and the selectedItem property is null

    1. The “support for selecting items not in the dataprovider” currently only works if you selecting a single value, if multiSelect is enabled it will only allow adding one new value.

      Sorry the code isn’t better code/documented (of course… that’s also on my to do list).

      Best,
      Hillel

  16. Nice work Hillel, I was wondering if you had any plans to support XML as opposed to arrays. I’m impressed on your progress up to this point so I’ll make an attempt to add XML support. I’ll update you if I have any results.

    1. Luis,

      I haven’t yet had the need to use XML but if you’re able to get it working I’d love to include your changes.

      Let me know if I can provide any help

      Best,
      Hillel

  17. Hillel,

    I tried your suggestion for setting the selectedItems property. However, setting the “keyField” only got rid of the null error…it still doesn’t work.

    My testing has found that it will work under one special case: the selectedItems property is sent when the initialized event of my test app is fired. However setting the selectedItems property on run time just doesn’t work.

    Any ideas?

    Thanks,
    Ed LaFave

    1. Ed,

      I’m sorry, I’m having trouble finding the initial comment you’re referring to. Could you please explain your issue a bit more clearly.

      Thanks

  18. Hillel, fine component, very nice code to work with, thank you so much.

    Along with Ed and others, I am using a TextArea for the prompt, and this is mainly addressed to those folks.

    In a multiselect situation, where I have set keyField and am setting the selectedItems AC, the selected items are not being written to the prompt control. They ARE getting into the component, because I can see them selected in the browser.

    I am about to dig into the code a bit deeper, but folks on this list are so helpful, I thought I’d ask if anyone has seenand solved this issue with TextArea?

  19. Ah, it is not in the component, but in my usage, so sorry for the noise.

    I tried my ChooserTA in Hillel’s demo file and it works fine.

  20. I am trying to debug my problem. Where and when is Chooser _selectedItems being iterated to build the comma delimited string and assigning that to combo.text?

  21. Pardon my process, but…

    In Chooser commitProperties, we process selectedItems and build _selectedItems either by item or keyField match.

    But I don’t see where this is being set into combo.selectedItems.

    In my situation, the main dataprovider is constant, but the selectedItems are changing.

    Combo.updateComoText() is never bing called.

  22. Ok, a solution this time. It is working, put any review of my theory is welcome:
    1) In Chooser.commitProperties, in the “if (_selectedItemsChanged” block after the loop, I added this: combo.selectedItems = _selectedItems;
    2) In Combo set selectedItems, I set “_isSelectedItemsChanged” flag and call invalidateProperties.
    3) in Combo.commitProperties, I added a conditional on the changed flag, and in that, reset the flag and call updateComoText();

    Is this a valid modification?

    1. Tracy,

      Sorry for the delayed response (I’m currently traveling). It’s a mistake that we’re not calling updateComboText, I’ll be sure to fix it in the next release.

      Thanks very much for your help (sorry for the time you needed to spend debugging the issue)

  23. Ed, I found that setting selectedItems (by binding) did not cause the component to update. See my fix just above. Hillel has confirmed it is a bug.

    Luis, What I think you mean is you want to add support for XMLListCollection in addition to ArrayCollection. (The component does not currently support Array, and supporting XML would be messy) This is also on my list. It does not look difficult, but I can’t get to it yet. I will post here if/when I do.

    One easy tweak I have made was to provide setting a title for the browser component.

    One of my immediate needs is to be able to specify the columns in the browser. Yes, I could change the class itself(thanks for the interface, Hillel!), but I am happy with the DataGrid, I just need to control the columns. My current plan is to pass in an Array of item property names. If anyone has any ideas on this I would like to hear.

    This is fine little community for a fine component, I am looking forward to contributing more.

  24. Ah, one more enhancement I am thinking about is a “clearSelected” method.

    Currently, to clear a multiselect, you must call selectedItems.removeAll(), and then set chooser.combo.promptTextInput = “”.

    To clear a single select, you must set selectedItem = null, then clear the prompt text field.

    I think I’d like to see this encapsulated in a method. This will be even more useful when we get XMLListCollection support implemented.

  25. hi. cool demo site. I’m very new to FLEX, and i am having trouble running the downloaded sample.
    it keeps giving me a compile error:
    Error: No class registered for interface ‘mx.styles::IStyleManager2’.
    at mx.core::Singleton$/getInstance()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\Singleton.as:111]
    at mx.styles::StyleManager$/get impl()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\styles\StyleManager.as:78]

    would appreciate any help.
    thanks

    1. Mei lo,

      I’m sorry, I haven’t been able to replicate your problem. I’ve tried updating Flex Builder to the latest version but no luck. Is there anything else you can share with me with regard to your environment which may help me?

  26. excellent piece….much better than adobe auto complete..but i have problem in using it…for eg. for adobe auto complete i just added their swc file & it started working …what should i do to add this auto complete to mine code ..basicall part which is important for me is “match any part component” plz help me out to figure this that how it should be used

    Regards
    Saurabh

    1. Saurabh,

      To enable matching any part you’d want to set the matchType property. Here’s a simple example.

      <?xml version=”1.0″ encoding=”utf-8″?>
      <mx:Application
      xmlns:mx=”http://www.adobe.com/2006/mxml”
      xmlns:hc=”com.hillelcoren.components.*”
      initialize=”init()”>

      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      private var _data:ArrayCollection;

      private function init():void
      {
      _data = new ArrayCollection([“Item One”,”Item Two”,”Item Three”]);
      }

      ]]>
      </mx:Script>

      <hc:Chooser dataProvider=”{ _data }” matchType=”anyPart” width=”200″/>

      </mx:Application>

      Hope this helps

  27. Hillel,

    When using with focusManager, i found a problem “Source could not be found for mx.core.UIComponent.focusManager in …path_to_libs\libs\chooser.swc”. So i couldn’t use the function of focusManager.

    Can you help me with the problem?

    Thanks,

    Linhvu

  28. thanks Hillel, I was calling the component wrongly hence the error.
    great tool.
    now i also want to try to get it to work with xml, or directly from the server

  29. Hi Hillel,

    great tool. Seems to do exactly what I want. I’m still very new to Flex so I am struggling a bit with using a dynamic dataprovider. I’m trying to do what Cyril describes above but not sure how to hook in a dynamic dataprovider.

    Any chance someone could provide an example of doing this?

    Thanks,
    Guy.

  30. Hillel,

    first a disclaimer, I’m a total novice to Flex but do come from a Java Swing background. That out of the way now to continue.

    In reference to my earlier issue I found that the Chooser was leaving it too late to update the underlying Combo’s dataProvider, as such they were getting out of sync with interesting results.

    I managed a workaround though, bit of a hack really. I modified the set dataProvider function in Chooser to update both dataproviders at the same time. This seemed to solve the refresh problem I was having.

    Hope this helps you come up with a more robust solution. I can send some sample code to demonstrate the point but it really is no more than what I said.

    Guy.

  31. Hillel,

    My sample is simple, first i have mxml form named TestFormView like this:

    This is the code-behind name TestFormViewBase

    package com.netnam.test.view
    {
    import mx.containers.HBox;
    public class TestFormViewBase extends HBox
    {

    // auto jump textfield
    public function hanldeJumpTextInput(event:Event):void
    { if(event.currentTarget.text.length == event.currentTarget.maxChars)
    { this.focusManager.setFocus(this.focusManager.getNextFocusManagerComponent());}
    }
    }

    }

    So when i am not using chooser in the form, it works well with auto jumb (the functions of focusManager work well), but having problem when using with chooser. Maybe program call to another lib of focusManager, ’cause it returns to alert Code Navigation Error when i click to focusManger in the code-behind.

    Pls help me,

    Linhvu

  32. Hi hillel,
    Thanks for reply. I have got i working 🙂
    One thing how to use this for xml file as dataprovider. Thanks again for such nice & helpful component

    Regards
    Saurabh

  33. All, I am working on getting Chooser to work with an XML/XMLList/XMLListCollection dataProvider, but am having some business issues that are slowing me down.

    The theory of modifying this component for XML is not difficult, but to implement it in all of the subcomponents and test everything is time consuing. I have a very good start and probably can finish it in a few hours, but I can’t commit to a time.

    Be assured that I will make my modifications available to all.

  34. Hillel, Cyril,
    Did you two sort out the dyanamic as-you-type dataprovider use case? I’m trying to do the same except my dataprovider is an ArrayCollection of XML objects. The AC gets updated with 10 new objects with every keystroke. But results are erratic and the text typed never matches date items.

    I’ve also found that the content of chooser.text at the time of the key-down KeyboardEvent is one character less than what’s actually typed into the chooser.

    When I type ‘e’, chooser.text = ”
    When I type ’em’, chooser.text = ‘e’
    … and so on.

    My KeyboardEvent listener is on the chooser.

    1. Adam,

      Ralf and Guy have pointed out that the following line of code my be the source of your problem.

      combo.dataProvider = new ArrayCollection( _dataProvider.source ); [Chooser.mxml, line 239]

      Try changing it to

      combo.dataProvider = _dataProvider;

      The purpose of the code was to decouple the original dataprovider with the one used in the chooser. While this was needed in my application, for most other people it makes better sense to simply pass along the original value (in my case I’ll just make a copy before setting the value).

      To fix your issue with being one letter behind try using the KeyUp event instead.

      Hope this helps,
      Hillel

  35. Dear Hillel,

    I really appreciate your chooser component but i was not able to active the function to input item not in the dataprovider. Is it possible to have an exemple please. Thank’s a lot for your help.

    Best regards

    1. Jerome,

      To allow the user to enter a value not in the dataprovider you can simply read the text property of the component, if the item isn’t in the list the selectedItem property will be null.

      Hope this helps,
      Hillel

  36. Hillel,

    Recently my application received a new requirement that resulted in the DataProvider for the AutoComplete component to be modified (add/remove) at runtime.

    By default the AutoComplete gracefully handled items being added to the DataProvider. However, if ItemA was currently selected and it was removed from the DataProvider it was still being displayed as “selected”. To correct this issue I went into the AutoComplete class and added an COLLECTION_CHANGE event handler to the DataProvider. The handler code is :

    private function dataProviderChangeHandler(event:CollectionEvent):void
    {
    if(event.kind == CollectionEventKind.REMOVE)
    {
    var itemsRemoved:ArrayCollection = new ArrayCollection(event.items);
    if(isMultiSelect)
    {
    var itemsToBeSelected:ArrayCollection = new ArrayCollection();
    for each(var item:Object in selectedItems)
    {
    if(!itemsRemoved.contains(item))
    {
    itemsToBeSelected.addItem(item);
    }
    }
    selectedItems = itemsToBeSelected;
    }
    else
    {
    if(itemsRemoved.contains(this.selectedItem))
    {
    this.selectedItem = null;
    }
    }
    }
    }

    Hope this helps you for your next release. I’m a huge fan of this component!

    Thanks,
    Ed LaFave

    1. Ed,

      You rock!! Thanks so much, that’s awesome, I’ll be sure to add in the next release.

      Thanks,
      Hillel

  37. Sorry to bother you again. There is a thing that i don’t understand. I explain my need. In this text area, if i input a word already in my list, i am able to use autocomplete to fill my input. If i enter a word not in may list, i want to keep it in the text input, but not in my list. Can you please help me witha code example. Thanks in advance.

  38. Dear Hillel,

    I too have been trying to use your component with a dynamic dataprovider. I had read in the comments that it was best to modify your Chooser class in this way:
    combo.dataProvider = _dataProvider;

    This helped a bit, but in some cases I swap in a totally new collection when a new character is added to the typedText. This was giving strange results: the clue seemed to be that handleChange was called too early, so that the previous dataprovider was being used to calculate _dropDown.rowCount.

    To resolve this issue I changed the following in your Combo class:

    //added 1 variable:
    private var _changeEventShouldBeHandled:Boolean = false;

    //changed the handleChange function:
    public function handleChange( event:Event ):void {
    dispatchEvent( event );
    //2 lines added
    _changeEventShouldBeHandled = true;
    invalidateProperties();
    /* commented out the rest of the handleChange function –> moved to commitProperties…
    …..
    */
    }

    //changed the commitProperties function:
    public function commitProperties():void {
    super.commitProperties();

    //start of code that was moved out of the handleChange function
    if(_dataProviderChanged || _changeEventShouldBeHandled) {
    if (!_dataProvider)
    {
    return;
    }

    var removed:Boolean = false;

    if (isItemSelected)
    {
    if (_isMultiSelect)
    {
    removed = handleChangeOnceSelectedMulti();
    }
    else
    {
    handleChangeOnceSelected();
    }
    }

    //var start:Date = new Date();
    filterData();
    //var end:Date = new Date();
    //trace(“>> search took: ” + (end.getTime() – start.getTime()) + ” msecs” );

    if (_dataProvider.length == 0)
    {
    hideDropDown();
    return;
    }
    else if (isPerfectMatch())
    {
    return;
    }
    if (isDropDownVisible())
    {
    if (promptTextInput.text.length == 0)
    {
    hideDropDown();
    }
    }
    else
    {
    if (promptTextInput.text.length > 0 && !removed)
    {
    showDropDown();
    }
    }
    if (isDropDownVisible())
    {
    callLater( positionDropDown );
    callLater( highlightFirstItem );
    _dropDown.rowCount = (_dataProvider.length < ROW_COUNT ? _dataProvider.length : ROW_COUNT);
    }
    _changeEventShouldBeHandled = false;
    }
    //end of code that was moved out of the handleChange function

    if (_dataProviderChanged)
    {
    _dataProviderChanged = false;
    if (_dropDown)
    {
    _dropDown.dataProvider = _dataProvider;
    }
    }

    if (_isMultiSelectChanged)
    {
    _isMultiSelectChanged = false;
    updateComoText();
    }
    }

    Althoug everything is working out nice for our application, I’m not sure this is the best way to tackle this problem. Please feel free to comment…

  39. Ed, where did you put that handler(in Chooser.mxml?), and did you have to declare a listener as well?

  40. Tracy,

    This is what my set dataProvider method looks like inside the AutoChooser class:

    public function set dataProvider( value:ArrayCollection ):void
    {
    if(_dataProvider != null)
    {
    _dataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE, dataProviderChangeHandler);
    }
    _dataProvider = value;
    _dataProviderChanged = true;
    _dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, dataProviderChangeHandler, false, 0, true);

    invalidateProperties();
    }

  41. great component…a nice feature would be to determine the placement of the delete option in the facebook style based upon the lenght of an entry in the text box – currently, if you have an entry that extends beyond the length of the text entry, a User cannot access the the delete option on the right of the entry…placement on the right vs. left based upon the entry compared to the length of the text box would be great…thanks again.

    1. Ata,

      Thanks for the suggestion, I hope to get it in a future release.

      If the text is too long I’d also like to add ellipses to the end of the string and show the full label on mouse over.

  42. Thanks for all you hard work in bringing this to the point that it is!

    My client has come back and said they want the ability to in essence bypass a selection and continue typing. The example they give me the data provider has the suggestion “PMS Color Match” and they want to be able to continue typing and enter “PMS Color Matching”. Currently this does not work. I’ve tried to implement the IsEqualFunction but keep getting errors – I’ve tried multiple function signatures.

    1. Jeff,

      Sorry you had trouble getting this working, I’m actually seeing the same error. Here’s a way to set it (w/o getting the error).

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application 
      	xmlns:mx="http://www.adobe.com/2006/mxml"
      	xmlns:components="com.hillelcoren.components.*"
      	initialize="init()">
      	
      	<mx:Script>
      		<!&#91;CDATA&#91;
      			import mx.collections.ArrayCollection;
      			
      			&#91;Bindable&#93;
      			private var _data:ArrayCollection = new ArrayCollection( &#91;"one","two"&#93; );
      			
      			private function init():void
      			{
      				autoComplete.isEqualFunction = isEqualFunction;
      			}
      				
      			private function isEqualFunction( item:Object, searchStr:String ):Boolean
      			{
      				return false;
      			}
      		&#93;&#93;>
      	</mx:Script>	
      	
      	<components:AutoComplete id="autoComplete" dataProvider="{ _data }"/>
      	
      </mx:Application>
      
  43. Hi Hillel,
    was wondering if you could give a hint on how to get this fine component working with xml files as the datasource. potentially i’m expecting to query datasources with >200,000 records, so array collection is not really feasible?
    thanks

    1. mei lo,

      I’ve been meaning to make it support XML for a long time. I’ve just checked in a new version into the google code site which adds support. I haven’t tested this extensively but it seems to work. Here’s an example of how I’m using it.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application 
      	xmlns:mx="http://www.adobe.com/2006/mxml" 
      	xmlns:components="com.hillelcoren.components.*">
      
      	<mx:XML format="e4x" id="xml">
      		<items>
      			<item>one</item>
      			<item>two</item>
      		</items>
      	</mx:XML>
      		
      	<mx:XMLListCollection id="xmlList" source="{ xml.item }"/>
      		
      	<components:AutoComplete dataProvider="{ xmlList }"/>
      	
      </mx:Application>
      

      Let me know if you run into any issues,
      Hillel

  44. Hi Hillel,
    I have one serious doubt in maintaining session in flex. Is there any way to maintain session in flex(not from java or other technonogies)? Kindly provide any solution?
    Kind regards,
    Haliflife_baby.

Leave a Reply to Mike Cancel 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 )

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