Component: AutoComplete Text Input

The AutoComplete TextInput is now available on the Adobe Flex Exchange (click the Exchange link if the direct component link doesn’t seem to work). You may post questions and feedback in the comments here and the authors will try to respond.

54 Responses to Component: AutoComplete Text Input

  1. Jiang WenJun says:

    It doesnt work when use in flash player 10,the problem is that you cannt use the enter key to select an item in the dropdown,however it worked perfect in flash player 9.How to solve it,please help me ?

  2. victor says:

    I’ve tried downloading the file several times and each time I get an error. Is it still valid?Matt sez: I just checked and it worked fine for me. This was the Adobe AutoComplete. Note that the Flex AutoComplete component posted by Hillel might be better with later versions of Flex, I haven’t played with it but at least it’s maintained ๐Ÿ™‚

  3. Josh says:

    Can anyone figure out a way to do the following:After the user has typed some characters and the lookAhead has autocompleted with more text, the user can press the Tab key to move the caret to the end of the text and all text is deselected.In other words, I need a component that does what Firefox’s autocompletion does.Is there any way to make this happen with this component? THANKS!

  4. Hi Guys. First, a big thank you for all that you give to the public. You all rock!!!I am having a bit of trouble with the AutoComplete feature. When I use it as an ItemEditor the field value gets blanked out if you click in the field after it’s been populated. In other words, I populate the data provider with an arrayCollection. The user selects a value. If the user clicks the field again the value is blanked out.As you can see below the code from my datagrid uses my own ItemEditor:headerText=”Chg. Code” dataField=”cc” labelFunction=”fetchGLAccount”editable=”true” itemEditor=”com.psc.eis.view.MyDataGridColChgCode” editorDataField=”value” width=”250″in my MyDataGridColChgCode I use the AutoComplete component. If I change it to a comboBox the blanking of the field does NOT happen.Any thoughts?Thanks for any help you can offer.

  5. Hillel Coren says:

    Here’s another version of the AutoComplete component if this one doesn’t do it for you,Hillel

  6. prashant shelke says:

    Here is solution for my last question:if(collection.length==0 || typedText==””|| typedText==null){typedText = “”;// New line added here.This will flush invalid input if it nots in dataProvider.Thanks.

  7. prashant shelke says:

    Thanks for this nice component 1st upon.I have one question, how we can restrict user from adding invalid entry? & without iterating all objects in dataprovider?Can we provide any inbuilt attribute or function which wont allow user to type invalid entry?Thanks in advance.

  8. Darya says:

    thanks for a great control!I have onerequest though: it seems that you use both TextInput and ComboBox to make the control, so is it possible to have two different change events: one that’s fired when you type in the control (i.e. TextInput’s change) and another when you select from the list (Combo’s change)?

  9. Nicholas says:

    I have the autocomplete component working perfectly, but whenever I try to type in something that doesn’t exist in the list (lets say if I try to type in a number in an autocomplete list that only has names) it stops the entire flex program from functioning, any suggestions?

  10. stefan says:

    Hi!I want to combine the autocomplete component with the functionality of a combo box. So if i type “*” , all entries of the dataProvider should appear in the autocomplete textfield. Is this possible?

  11. Srinivas says:

    Hi,I am using this component for asynchronous data loading, lookAhead is not working for me.Thanks,Srinivas

  12. Ramanaidu says:

    Hii..i have a problem to validate the same field accroding to the data type of the field..actually in a button click we get the pop up and there i have to validate the field..but when i get the pop up, based on the data type my field has to be valudated..when i click the button in that pop up..plssss help mee..Thank u…

  13. evanmcd says:

    Hi, nice component. Saved me a bunch of time.I’m working from the restaurant finder sample, and so was dealing with the fast typing bug in which text is replaced if you don’t delay a bit after each letter. So, a normal speed typed search for ‘global’ for example, tends to get you ‘bal’.Tried a few different things to solve it, but ended up using a quick hack that works but has one drawback.I placed a new text input field on top of the ac component, using the same size so the ac field is not viewable.Then, handled the change event of the new text field with a function that set the typedText property to the text property of the new text field.This solved the fast typing issue, but means that you can’t use the arrow keys to navigate the results. That trade off works for me.If anyone has found a less hackish solution, I’d love to know about it.Thanks.- Evan

  14. julien says:

    Hi,Very nice component ๐Ÿ™‚ I just had one question, I’m using the component with “keepLocalHistory = true” and an EmailValidator whose “source” property is bound to the autocomplete component, is there an example of how this can be done without the autocomplete being “reset” each time?

  15. kenneth says:

    I have 40,000 records in an arraycollection that put as the dataprovider for the autocomplete textinput but it’s very slow. any tips on improving the performance?thanks-k

  16. Srikanth says:

    A big bug for a nice component. If you dynamically assingn the data provider after the component is created. the firstitem of the dataprovider is defaultly displayed int the text box. Can some body provide a work around.

  17. Randy Martin says:

    Is there any way, short of modifying the code, to only allow entries that are actually on the list?Also, it seems that the first time the component is used, if you don’t type anything, but select from the list instead, the item is not actually selected. If you then select another item from the list, the component works normally.Thanks,~randy

  18. Rahul says:

    Hi I am new in flexI am using autocomplete control but I have one problem. The first field in it is not get selected in text input of combobox after clicking on it or after stroking enter key. if anybody have any idea about this plese let me know.

  19. Aubweb says:

    Higreat component !but I don’t know how to set the filter criteria to substring and how to display the field named ‘label’ and make the substring function on field ‘data’.ThanksAubry

  20. Jeff Hindman says:

    Under some scenarios, I am seeing the DownArrow of the AC component as being visible. Is there a way to initialize the style so it remains invisible all the time?Thanks —-Jeff

  21. Satish Mummadi says:

    Can you post a snippet code for using a substring or regular expression for filter function???

  22. Sal says:

    How can I use this AutoComplete component with a cfc component being called as a query by coldfusion?

  23. Nisheet Jain says:

    Hey Mike,I could not understand what do you mean by making the autocomplete component dynamic. Can you illustrate this?

  24. jina says:

    hihow to make AutoComplete Text Input dynamic in flex component. i am new to flex help me pleaseThanks in advance.from jina

  25. Mike says:

    Here is a possible solution for Beena and the ‘pausing’ b4 getting data.Add a ‘typedTextChange’ event handler and in it setup a timer that waits a specified length of time before sending the request to the server.If the user types something in after the timer has started running but b4 it has expired, then stop the original timer and set a new one. Here’s some code I use.// stop the running timer, if we come back here too soonif(myTimer != null && myTimer.running)myTimer.stop();// only search for inputs of length 3 or moreif(this.typedText.length > 2){myTimer = new Timer(250,1); // wait 1/4 second before getting the products myTimer.addEventListener(“timer”,requestProducts);myTimer.start();}’requestProducts’ is the method that actually makes the request to the server for the data.

  26. Beena says:

    I’m new to Flex. I am trying to set my autocomplete component’s dataProvider dynamically that is fetched from server. My problem is closer to something as Ajit says above that “we need to update dataprovider on some pause for example 2 sec’s or so”. Can anyone hint me how we can achieve this or any sample codes available?TIA,Beena

  27. Michiel says:

    I’m using the autoComplete Component and it’s working fine except for one thing. I use an XML object to populate the autoComplete Component. After the autoComplete is loaded the first element of the XML object is shown in the autoc. How can I prevent this from happening?Regards,Michiel

  28. Diana Grayson says:

    This is great! It would be perfect if it combined the type ahead and ComboBox functionality: Type ahead when the user knows what they are looking for and you want to validate to a list; ComboBox when the user isn’t sure and wants to browse the validated list. Maybe a property to switch the ComboBox function on/off depending on the usage?

  29. Alfred says:

    Sorry, problem solved ,anything works great!Alfred

  30. Alfred says:

    Hello,when i try to implement the filterfunction from the example above, i get the error “itemToLabel is not a function”:public function substringFilterFunction(element:*, text:String):Boolean{var label:String=searcharray.itemToLabel(element);return(label.toLowerCase().indexOf(text.toLowerCase())!=-1);}Whats wrong? Please can you help me?Thank you in advance!Alfred

  31. Alfred says:

    Hello and thank you for this beautiful component!I have a question: How can I turn on the filter criteria “substring” as shown in this example: in advance!Alfred

  32. Nisheet Jain says:

    Hey are you sure you are setting the labelField property? I suppose you must be. In that case such a thing should not happen.Can you provide some code snippets here..

  33. Mark Thielman says:

    Hello I have aa question I was hoping someone could help us with. We are looking to use the autocomplete component to assist users with address data entry. What we want to do is have an autocomplete box that the user starts typing a city name into. after they type in 3-4 char the component needs to go out to our db and bring back the cities that match along with the state and zip code. Once a user either mouses down to the correct entry or picks it with the mouse it should then just leave the city name in the field and then save the State and Zip to their own read only fields.We have gotten part of this to work. We get the list to come back and we can also get the state and zip to go to their own fields, but what happens is we can not get rid of the state and zip from the autocomplete component. It seems that some autocomplete code is overriding all our efforts to just leave the city name in the autocomplete field. Anyone offer any help? Thanks in advance.

  34. I would like to use this as an item editor in a datagrid. This is a different datagrid than the one that stores the values the component selects from.The data in the datagrid column is actually a numeric that is really a relational database key. I have an item renderer working that looks up the key and displays the string associated with it.I would like some hints about how I would pass the string associated with the key into the autocomplete component and get the key of the selected item back into the datagrid.I realize that I will probably have to customize the component and any help with that would be great. Any other hints about how to turn this into an item editor would also be appreciated.

  35. Bob Keleher says:

    would it be difficult to add an option to this component so that the user must pick one of the data provider values rather than allowing them type in whatever they want? I’m new to flex and don’t know how to go about doing that.

  36. Gavin Martin says:

    To follow-up on my last post:I have discovered the way to override the behaviour of the first entry in a dataProvider being entered into the AutoComplete field when the dataProvider is assigned.Simple use the “prompt” attribute on the AutoComplete field. E.g: prompt=”xxxx”Quote from LiveDocs:”If there is no prompt property, the selectedIndex property will be set to 0; otherwise it will remain at -1″Although the default functionality of this property (to add a prompt to a ComboBox) seems to be overriden in the AutoComplete field the underlying selectedIndex property does still follow the above rule.Basically it wont show whatever value you enter for the “prompt” attribute, but it will have the desired effect.Hope this helps anyone who is having similar problems.

  37. Gavin Martin says:

    // Yes, AutoComplete is extension of Combobox, and combo is set to 0 when a dataProvider is assignedI can see why this is the behaviour in that case. Is there any way that this can be overriden though?Otherwise essential you are unable to dynamically assign a dataProvider to the autocomplete without messing up what the user has typed in, as the field is populated with the first entry from the dataProvider.

  38. ajit says:

    Default behavior for Autocomplete component is to open dropdown when typed text changes. One solution is to update dataprovider on some pause for example 2 sec. So if user is typing continuously don’t call remote service which updates underlying dataprovider for Autocomplete but if user pauses for 2 sec or so during typing call remote service which will update the data provider based on currently typed text.I have tried this for an dictionary sample and it works fine.If you want to open dropdown when dataprovider changes you will have to extend component and override setter for dataprovider. By default drop down is opened only when user types(change) any text in textfield.Thanks,Ajit

  39. Andrisi says:

    Actually solves this! Async suggestion update.

  40. Andrisi says:

    I’d like to use it with data coming from a remote php script based on typedText, but I can’t prevent the AutoComplete’s dropdown list from reopening each time I type an additional character and then change the dataProvider’s content on getting the remote data. And it only opens when I call open() on the combo.

  41. piotr says:

    //Is this normal behavior?Yes, AutoComplete is extension of Combobox, and combo is set to 0 when a dataProvider is assigned

  42. Gavin Martin says:

    Great component !However, I have one small question:Basically the assignment / re-assignment programatically of the dataProvider after the component has been created, seems to lead to one of the entries of the recordset populating the textfield.Should be repeatable with the CountriesData example.Simple move the assignment of the dataProvider from the component tag, and then assign the dataProvider to the creationComplete event of the application.For example:In the mx:application tag——————————creationComplete=”init()”In mx:script block——————————private function init():void {AC.dataProvider = myDP ;}Is this normal behavior? If so, how would it be possible to assign the dataProvider after the component has been created without this happening?

  43. Adz says:

    I have found a bug with the AutoComplete component, where it clears the text field if text is assigned programatically and the text is bigger than the default component size (21 characters).The bug exists on line 520 of the class:if(selectedIndex == -1)textInput.text = typedText;My fix (seems to work and haven’t found any side effects yet):if(selectedIndex == -1 && typedText)textInput.text = typedText;Another bug exists on line 559, where the selection caret is placed at the end of the text field when there is more than 21 characters in the text field and you try to add or delete characters inside the text field:else if(typedText)//Sets the selection when user navigates the suggestion list through//arrows keys.textInput.setSelection(_typedText.length,textInput.text.length);My fix is to remove the setSelection() call:else if(typedText){//Sets the selection when user navigates the suggestion list through//arrows keys.//textInput.setSelection(_typedText.length,textInput.text.length);}I am unaware of any side-effects to this fix, but would be interested to hear other’s opinions on this.

  44. Adz says:

    Woops, don’t I feel like an idiot… this was meant to be directed at a different component ๐Ÿ™‚

  45. Adz says:

    I had problems with this component when I had only typed in one character. It seems that the handleTextChange was dispatching an event before the text property was updated with the character. Fixed it by changing a line in replaced this:dispatchEvent(new Event(Event.CHANGE));with this:callLater(dispatchEvent, [new Event(Event.CHANGE)]);Works a treat for me! Thanks for the great component!

  46. Jinwoojung says:

    See you~!

  47. ์˜ค์œ ๋ฏธ says:


  48. Bruce says:

    I’ve been working on a spell checker using jazzy as the spell checker engine. I’ve done this for flex 1.5 and am porting my idea over into flex 2. I think it will be much better in 2 since i can do the squiggly underline in red. I have had issues with different fonts in the text area. So i’m thinking about using a paired down richtexteditor with the font size applying either to all the text or removing the font size widget all together.

  49. mark says:

    A spellchecker component would be fantastic. A must for most serious apps and nothing out there at the moment. Would need to handle rich text. Maybe just an add on to Rich Text Editor.

  50. nz says:

    This is pretty coolsome feedbackfontWeight style doesn’t seem to work/inheritmaxChar property would be good seeing its sort of like a TextInput controlthanks, hope to see more cool controls ๐Ÿ™‚

  51. equintano says:

    both are cool…thankยดs