Documentation
The best way to learn how to use the component is to use the Demo to see what options are available and then reference the source code in the examples folder to understand how it’s implemented. It’s also a good idea to skim through the methods and properties in the ASDoc file (as the demo doesn’t use every property/method available). Here are the two files: AutoComplete and AdvancedAutoComplete.
Although the component doesn’t extend from the ComboBox class, it’s designed to have as similar an interface as possible. For example, it implements the filterFunction, labelFunction and selectedItems properties as well as others.
Here’s the simplest possible implementation of the component.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:components="com.hillelcoren.components.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["one", "two", "three"] );
]]>
</mx:Script>
<components:AutoComplete dataProvider="{ _data }" />
</mx:Application>
While there are a fair number of settings you can adjust, I’d like to start by the showing the way I generally use the component.
<components:AutoComplete dataProvider="{ _data }"
prompt="Please select" backspaceAction="remove"
selectedItemStyleName="underline"/>
I’ve set three properties which I’ll review quickly here.
selectedItemStyleName: Controls the look of the selected items. There are four choices: macMail, facebook, underline and none.prompt: A string to display when no value is set.backSpaceAction: Determines what to do when a user clicks backspace. By default we focus the item (ala Mac Mail) but this can be changed to remove it.
Working with the data
Like most other Flex components you can set either the labelField or labelFunction property. By default this will control how the item is displayed through out the component (in the drop down, once selected and in the browsers).
You have a couple of choices for customizing the drop down label. You can define a dropDownLabelFunction which returns an HTML string to handle formatting the item. This is used in the email demo to display the person’s email address (ie, “Homer Simpson “) in the drop down. If you’d like greater control you can set a dropDownItemRenderer. This can be seen in the Color Chooser demo.
If multiple selection is enabled the component can contain both selected items and a search string. Because of this I’ve need to add a searchText property which can be used to get/set the search string. The text property returns a string representation of the selected items.
Related to this there are two main events which the component dispatches: change and searchChange. The change event is dispatched when the selectedItem property changes, while the searchChange event is dispatched when the search string is changed.
To filter the data you can either use the built in options by setting the “matchType” property or create a custom filter by setting a value for the “filterFunction” property. The built in options are:
beginning: Only match the beginning of the string.word: Match the beginning of any of the words in the string.anyPart: Matches any part of the string.
All of the built in options perform a case-insensitive search. Here’s how you could use the filterFunction property to implement a case-sensisitve search.
<mx:Script>
<![CDATA[
import com.hillelcoren.utils.StringUtils;
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["ONE", "TWO", "THREE"] );
private function filterFunction( item:String, searchStr:String ):Boolean
{
return searchStr == item.substr( 0, searchStr.length );
}
]]>
</mx:Script>
<components:AutoComplete dataProvider="{ _data }" filterFunction="filterFunction"/>
To select items you have three options, you can use either selectedItem, selectedItems or selectedItemId. The first two options are pretty standard so I won’t cover them here. Setting the selectedItemId property will cause the component to search the items in the dataProvider for an object with a matching id. By default, it looks for a field called “id” on the item but you can set a custom field using the keyField property.
Out of the box the component requires the user to select an item from the list. You can allow the user to enter their own values by setting allowNewValues to true. You can then control whether or new the new items are editable by setting the allowEditingNewValues property. Additionally, you can set the allowDuplicates property to control whether or not to allow an item to be selected more than once.
A common question is how to use the component with data returned from the server. The best practice is to use a change listener. Once the user has entered enough characters fire off your data request. Once the data has been returned and passed to the dataProvider you can call the search() method to tell the component to filter the items and display the drop down. You can check out the DynamicData.mxml file in the examples folder to see the details.
You can use either an ArrayCollection or an XMLListCollection as the dataProvider. I showed you an example with an ArrayCollection earlier on, here’s an example using an XMLListCollection.
<mx:XML format="e4x" id="xml">
<items>
<item>one</item>
<item>two</item>
<item>three</item>
</items>
</mx:XML>
<mx:XMLListCollection id="xmlList" source="{ xml.item }"/>
<components:AutoComplete dataProvider="{ xmlList }"/>
Usability settings
Multiple Selection
This is the one feature which separates the component from other the AutoCompletes out there, setting the allowMultipleSelection to true enables the user to select more than one value. The AdvancedAutoComplete extends this feature by adding a selectionLayout property which when set to vertical causes the selected items to be displayed in a List component.
AutoSelect
The AutoSelect functionality will automatically select an item if it matches a case-insensitive string comparison and is the only match found. This feature can be disabled by setting autoSelectEnabled to false.
If you’d like to use a custom function to determine if an item should be auto-selected you can set a value for the autoSelectFunction property. Here’s an example where we use this property to auto-select once when there is a single match. For example, typing “o” will select “one” right away.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["one", "two", "three"] );
private function selectFunction( item:String, searchStr:String ):Boolean
{
return true;
}
]]>
</mx:Script>
<components:AutoComplete dataProvider="{ _data }" autoSelectFunction="selectFunction" />
Clear Icon
The core of the component is the PromptTextInput class. This class provides two main features: the prompt and the clear icon. We covered the prompt earlier but the clear icon is a little gray x icon which appears if there is text in the component. Note, this feature only works if allowMultipleSelection is set to false.
Drop Down
The number of items displayed in the drop down is controlled by the dropDownRowCount property. By default, the width of the drop down will
be set to match the width of the TextInput. However this can be overriden using the dropDownWidth property. On the topic of the drop down, you can use the showDropDown, hideDropDown and isDropDown visible to show/hide the drop down.
AdvancedAutoComplete
The challenge in building a component with lots of features is keeping it as streamlined as possible. In order to support adding more advanced functionality while not bloating the component I’ve created an AdvancedAutoComplete class which extends the AutoComplete component.
Selection Layout
As discussed earlier, setting the selectionLayout to vertical causes the items to be displayed in a List. When using the vertical layout you can use the showRemoveButton property to control whether or not to show a remove button.
Browsing
This can be enabled by either setting the showBrowseButton property to true, or by adding an options to the action menu (as is demonstrated in the Color Chooser Demo). By default we show a pop window which contains a searchable DataGrid. You can control which fields of the data to display in the grid using the browserFields property. If multiple selection is enabled, you can set the useListBuilder property to true to display a two column browser instead. If you’d like to implement your own browser you can either extends one the existing ones are create a component which implements the IBrowser interface. You’ll then need to set the browserClass property to your new class.
Ordering
If the selectionLayout is set to vertical you can enable the user to order the items in the list by setting the showOrderButtons property to true. If using the List Builder the ordering buttons will also be displayed in it.
Actions Menu
To enable the action menu you need to set a value for the actionsMenuDataProvider. This is just a regular Flex Menu component so all the usual features are supported (ie, using checkboxes). Here’s a link to the supported menu attributes. You can see an example of how to use this feature in the code for the AdvancedDemo. If enabled the menu can be displayed by pressing the down button while the component has focus.
Odds and Ends
Custom Skins
The selected items are simply buttons, this means it’s pretty easy to change the look and feel using skins. The styles which the component comes with (macMail, facebook, etc) are all implement using skins. It’s possible to define your own custom skin. If you’d like to implement it you can check out the CustomSkin.mxml file in the examples folder.
First Class Components
The component is made up of a number of classes. Some of these classes are useful in their own right. I consider the following three classes to be first class components:
- PromptTextInput: This is a TextInput with two additional features, you can set a prompt which will appear when no value is set and a clear icon will appear when there is a value set and the mouse is over the component.
- ListBuilder: This is a two column browser which can be used to add/remove items from a list.
- CloseableTitleWindow: Adds a key listener to the TitleWindow which enables the user to click the ESC key to close it.
Utility Classes
The com/hillelcoren/utils folder contains a couple of helper classes. There are some useful functions here which you may be able to use elsewhere in your applications. Some examples include a function to compare if two ArrayCollections are equal and functions to convert string to/from camel caps.
Validating
You can use a regular validator to make sure that a value is selected. Here’s a simple example demonstrating how to implement it.
<mx:Validator source="{ autoComplete }" property="selectedItem"/>
<components:AutoComplete id="autoComplete" dataProvider="{ _data }"/>
Inline Button
You can use the inlineButton property to set a button to appear at the end of the component. This feature is used in the AdvancedAutoComplete for the button used to display the actions menu. Here’s an example of how you can use this property to display a button which causes the drop down to appear (ala a regular ComboBox)
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _data:ArrayCollection = new ArrayCollection( ["one","two","three"] );
private function handleButtonClick():void
{
if (autoComplete.isDropDownVisible())
{
autoComplete.hideDropDown();
}
else
{
autoComplete.search();
autoComplete.showDropDown();
}
}
]]>
</mx:Script>
<components:AdvancedAutoComplete id="autoComplete" dataProvider="{ _data }">
<components:inlineButton>
<mx:Button skin="mx.skins.halo.ComboBoxArrowSkin" click="handleButtonClick()"/>
</components:inlineButton>
</components:AdvancedAutoComplete>
That about does it, hopefully you found this useful. I plan to continue to improve the documentation over time. If anything here is unclear, or if there are other areas you’d like me to cover please post a comment and I’ll update the page.
Best,
Hillel
when you try to add a new tag and want to name it “star”. but have already “starfish” registered as tag. it automatically selects this one instead of creating a new one. Is there a key or separator to avoid automatic selection? thanks for this excellent component, Hillel !
Delimiter is not working for me. I’m using the latest version of AutoComplete built on Flex 4 SDK.
Could you please provides some more details, are you setting a custom delimiter or are using the default (commas). Also, what about it exactly isn’t working.
Hi Hillel,
Thanks for the prompt reply, instead of the default delimiter which is a comma, I was ask to change it into semi-colon so I set the value of the delimiter property of the AutoComplete component into a semi-colon ( ; ) but it did not work. It still uses the comma. By the way thank you for sharing this great component it really helps me a lot in most of my projects.
You’re absolutely correct, I’ll include a fix for this in the next version. For now to fix it you’ll need to use the source and replace the comma in line 61 of classes/IconButton.mxml in the commitProperties function.
Thank you very much for this quick solution. Good thing I also have the source file. Have nice day Hillel.
How can I change the sort order of items in the popup browser?
I have:
Room 1
Room 2
….
Room 9
Room 10
Room 11
But – they display alphabetically, I want them to display in the natural order of the list.
You’ll need to apply a custom sort function to your dataProvider. In order to sort numerically you’ll need to remove the “Room ” part of the string and then convert the remaining characters to numbers.
Hi, Hillel! Once again, thank you for great component!
I am facing a small problem.
When I create custom skin for selected item, and then try to use it like this:
selectedItemStyleName=”autoCompleteSelectedItemSkin”
Compiler geves me an error:
“Invalid value: autoCompleteSelectedItemSkin. It must be one of macMail, facebook, underline, none.”
Flex SDK 4.5.1.
Can you please give me some advice?
I’ve managed to ovrriede the default style by adding by adding the same style name in my main application css file, that solved the problem.
Thanks for letting me know you worked it out.
Best,
Hillel
This component is awesome! Thanks for sharing!
I have only 1 question – how can you preselect an item (I mean, let’s say this autocomplete is a part of a contact form and I want to use the form to edit the data taken from the db – the user hits edit button, and the contact form appears with all fields populated and ready for editing. How do I ‘tell’ the component to preselect one specific dataprovider (ArrayCollection) item?
autoComplete.selectedItem = (the item you want to select)
forgot to mention that I’ve already tried that, but I might be doing something wrong – could you provide an example of what should be there instead of “(the item you want to select)”. I have an array collection called citiesAC with ID and City in it (data taken from sqlite) – could you tell me how it should look like if I wanted to have any item preselected e.g. pair ID=2 and City=”London” ?
In that case you could use selectedItemId
got it sorted out! Thanks Hillel!
Hi Hillel,
I have 1 more question – how do I retvieve the selected item’s id after i ‘manually’ (using code) preselect some item. For example, I have an ArrayCollection citiesAC with 2 fields ID and City and i do:
autoComplete.dataProvider = citiesAC;
autoComplete.selectedItem = “London”
and then when I do:
trace(autoComplete.selectedItemID)
i always get NaN instead of 2 as assigned in the Array Collection. Any ideas how can I retrieve the ID after I manually set the selectedItem property to any string?
Try calling validateNow()
unfortunatelly it didn’t help. When I was debugging the app i saw that after calling validateNow() the only thing that changed was selectedItem and _selectedItem. SelecteditemId with no changes. Got any other ideas?
Could you then use selectedItem.ID
Unfortunatelly that didn’t work neither. Anyway I did a little workaround to solve this – I searched the dataProvider manually comparing it to the city I wanted to preselect and then setting the actual autoComplete field using the selectedItemId that was assigned to the found item and everything works perfect.
Maybe a thing to consider in future releases of the component would be automatic browsing thru the dataprovider to find the corresponding ID to a preselected item using String (for example autoComplete.selectedItem = “London”). That would make things easier a bit i think.
Anyway thanks for your help! Cheers!
Hi Hillel,
This component is very good! I want to know how to copy the selectItem.
Thanks,
John
I’m sorry, I’m not sure what you mean. Could you please try explaining it another way.
Hi Hallel,
I have doubt related to Auto complete…
i have tow auto complete text box ( say book name and author)
Book name ( ABC) selected from listing (ABC,DER,FEB) and author (BEL) also selected from authors listing(DEL,BEL,KAL)…
When I focus the third textBox, popup should appear with the listing (ABC,BEL) of above text box answers…
Can you please provide me a sample source code…
If you haven’t done so already you may want to take a look at the files in the example folder.
Hi Hillel
How can I set the fontFamily of the AutoComplete prompt?
I went through the Documentation with no luck
can you please assist?
cheers
Which version of Flex are you using. With 3.x just setting fontFamily=”” appears to be working for me. I did find another user who posted a comment related to embedded fonts in Flex 4.5 though… http://hillelcoren.com/flex-autocomplete/comment-page-5/#comment-6454.
Hi Hillel and thank you for replying so soon
I’m using flex 3
so yes, of course I set the fontFamily style, and indeed it is working
for the input text when I’m typing in it
though when I focus out, the prompt is rendered in some other system font with Italic fontStyle…
does the AutoComplete component uses two different text components for the prompt and the textInput?
cheers
Yariv
The text input and the prompt are the same component. The class is called PromptTextInput and it should use the same font for the prompt just italicized. If you don’t want the font to be in italics you’ll need to use the source and modify it. The italics are set in the showPrompt function.
that explains it, I’m using an embedded font which I haven’t embed its italic type. thanks for that.
That would explain it… happy to help
Been reading through your documentation and although it is very helpful, just wanted to point out that the your coding examples are being HTML encoded making it very hard to read through the code quickly. Hopefully this can be remedied to make it easier for users of your components to read through your documentation.
Thanks for pointing that out. I host my blog on wordpress.com and in the past they’ve changed how they display code. I’ve fixed the code examples in the documentation.
I am more of a hobbyist Flex developer and I was able to get my basic needs to work without too much bother. Great component!
I have AutoComplete running in a TitleWindow pop-up. Presently upon CHANGE, I call a local function that in turn directly calls a public function on the parent document. That works.
But I would prefer to create an event listener in the parent document that listens for CHANGE in the pop-up and then calls the private function. However, I do not know which event listener to use – seemingly spark.events.IndexChangeEvent is not supported:
popup["autoComplete"].addEventListener(IndexChangeEvent.CHANGE, function)
Thanks…
Try listening for Event.Change. The top of AutoComplete.mxml lists the events and when they’re dispatched.
Perfect. Thank you.
Hi Hillel,
First, Thank you for sharing this wonderfull component.
Second, I just have an issue when I manully add the object to the AutoComplete upon its creation completion finished by using the autoComplete.addItem(myObject);
And then when i try to use the Back Arrow button to delete that object, it didn’t do anything.
If I selected another item form the dropdown list, and use the Back Arrow again, I got this error:
RangeError: Index ’1′ specified is out of bounds.
at mx.collections::ListCollectionView/removeItemAt()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:592]
at com.hillelcoren.components::AutoComplete/handleKeyDown()[C:\Users\hillel\code\autocomplete\src\com\hillelcoren\components\AutoComplete.mxml:785]
Can you help??
Thanks,
Try autoComplete.selectedItem = myObject. The addItem function is part of the Grid class, I realize it can be confusing…
That is it… Thank you.
How to use wild card as one of list item for Autocomplete?
I’m sorry, I’m not quite sure what you’re trying to accomplish. Could you please try explaining it another way.
A simple error in this page: there is the word “defualt”
Thanks for pointing that out, I’ve corrected it.
Hi Hillel .. I am using your great component. Running into a little issue whereby when I select an item in the autocomplete field .. it narrows down the list of items I show in a grid. I have to go to the next autocomplete field type a few spaces and then backspace to get it to access the autocomplete field.
Any thoughts on how to control this?
I’m sorry, I’m not clear on your implementation. Are you using it as in ItemEditor for a DataGrid? You may want to check out the source code for the demo in the examples folder as it demonstrates the best practice when using it with a grid. If that doesn’t help, if you could create a sample application which demonstrates the issue I’d be happy to help debug it.
Hi, I would like to use your component in very restrictive UI. I haven’t found a way to NOT have the Inputbox grow vertically. Is it possible that the textinput behaves like a textinput (scrolls to the right if we have more characters than space). Thanks in advance. Benny
It’s possible that an older version of the component may work that way (http://code.google.com/p/flex-autocomplete/downloads/detail?name=AutoComplete-0.93.zip). Otherwise, you can set the maxHeight but that would create vertical scrollbars. You’d probably need to override the layout of FlowBox.mxml.
Hi, thanks for the prompt reply! I don’t know if I am that apt to recode / override the FlexBox. I think the FlowBox concept just doesn’t fit with what I try to achieve. I will dig a little further to understand the AutoComplete code you wrote, mybe I can “dumb” it down that much that it just adds comma seperated text with the autocompleted values in a TextInput. Keep up the great work!!!
Hi, awesome component, how can I expand the dropdown on creationComplete? so the first elements are visible. Thanks for your help
You should be able to call showDropDown()
Thank you… worked, also used the isDropDownVisible() to hide and show when I need to.
2 suggestions.
1. Please add events FocusIn and FocusOut
2. Please add styles to remove the focus indicator (focusThickness)
1. The events are there, they’re just hidden. If you type it, it’ll work.
2. You can probably accomplish this by styling autoComplete.flowBox
Best
Hi,
I’v used the AdvancedAutoComplete for two years now, and I think it is fantastic!
However, up till now I used a local database for the dataProvider. Now I want to use a server side script to get a filtered set for the dataProvider. And I have no idea how to do that! I’ve looked at DynamicData.mxml, but I don’t see how I can accomplish anything (by the way, when I try DynamicData, nothing happens).
I would be very greatful if you could help me on my way!
DynaimicData.mxml demonstrates how to handle the UI, you’ll need to add a remote service of some sort to load the data though. The basic idea is that after the user types a couple of characters you search for the data on the server and add it to the AutoComplete’s data provider. If there’s a specific step you’re stuck I’m happy to try to help more.
Thanks for your reply!
I have a RemoteObject to get a dataset from the server, with an eventlistener to set the dataProvider of the AdvancedAutocomplete (aac). The getData method of the remoteObject is fired on the creationComplete event of the autocomplete. This works just fine.
However, when I change this to get the data, not on creationComplete but on the change event of the AdvancedAutoComplete, nothing happens.
In the onResult of the RemoteObject method I have:
data = new ArrayCollection(e.result as Array);
aac.dataProvider = data;
aac.search();
What am I doing wrong here?
You probably want to use the searchChange event rather than the change event. The change event is dispatched when the selected item is change whereas the searchChange event is dispatched when the user changes the search string.
Ha! That did the trick. Thank you!
One final question: in the AdvancedAutoComplete, how can I listen for a click on one of the items in the list of selected items?
By the way, I use your autocomplete in a course Ancient Greek, with a function that changes normal keyboard input on the fly in polytonic Greek. It works like a charm and teachers and students are very happy with it. One minor thing: I seem not to be able to use embedded fonts in the ShorterTextInput. Any explanation for this?
The component doesn’t currently provide an easy way to listen to clicks on individual items, however I actually needed that feature in the current application I’m working on. To implement it I used the source code and modified the handleClick function in SelectedItem.mxml to dispatch an event. I’m sorry, I’m not sure why the embedded fonts aren’t working though.
Thanks.
It’s getting better all the time…. And is there a way to set focus on the textInput on creationComplete?
Is setFocus() not working for you?
No sir! Not with autoComplete.setFocus() on applicationComplete, nor with this.setFocus() on creationComplete in ShorterTextInput.mxml. Perhaps I’m overlooking the simple solution? I have tried to find it in your source code (after all, the textinput receives focus directly after browsing…) but I have to confess that there is much in there I don’t understand. I can only hope that my questions aren’t too silly…..
If it’s when the app first loads then you’ll also need to give the SWF the focus. Here’s an article explaining how to do that http://www.webappsolution.com/wordpress/2010/08/31/set-flex-to-focus-on-application-load/
Thank you again! I will try out the InternalInterface, but I have already solved the problem without it:
body onLoad = “setSWFFocus()”
function setSWFFocus() {
var myApp = document.getElementById(“${application}”);
myApp.tabIndex = 0;
myApp.focus();
}
and in the app of course creationComplete=”autoComplete.setFocus()”
Also set params.wmode to “opaque” (for Chrome).
Your AdvancedAutocomplete gives me many, many complex possibilities for exercises and quizzing. It is just great! If only I could find out how to make the list of selected items clickable, life would be perfect……. Actionscript is soooo much more difficult than Javascript!
Hi Hillel,
Great work on a much needed component!
Q: I have allowMultipleSelection, allowNewValues and allowEditingNewValues all true. (Am really liking this combination… it provides a lot of features in a small form-factor. Nice!). Sure enough, the user enters a new value (“aardvark”) and selects a couple matches (“baboon”, “chicken”). The new one appears as plain text and the matching ones are nicely styled (am using “facebook”). So far so good.
The user leaves and comes back. I really want to reproduce where he left off, with both new and matching values, appearing exactly as above. So I set selectedItems to an ArrayCollection with the previously supplied values. Unfortunately, the new values among them always appear as blanks (e.g. there’s a space long enough for ‘aardvark’, but it’s blank; ‘baboon’ and ‘chicken’ show up just fine in “facebook” style.) Note that when I inspect .selectedItems or .text, all 3 items are present).
Any ideas on how to make ‘aardvark’ appear? (FWIW, I’m using Flex 4.6).
Thanks!
I think I see the problem, you’ll need to use the source and change the addItem function in AutoComplete.mxml.
Change editableItem.height = textInput.height;
to editableItem.height = 22;
textInput.height is set to 0 which explains why you see the length of the text but not the height
Perfect. Thanks!
Hi,
At this moment I’m using the autocompete for inserting items in a database and verifying that I create no doubles.
I encountered a problem: once I have typed a word that is already on the list, I cannot insert a longer word that is an extension of the first. For instance, if I have the word ‘consul’ in the list, I cannot insert ‘consulatus’, for the shorter word gets immediately selected.
Is there a way to solve this?
Try setting autoSelectEnabled to false.
Hello,
Just a quick question, is there a way to remove text indent of the prompt text? I tried setting the value of textIndent and paddingLeft property to 0 but it doesn’t seem to work.
Thank you in advance for the help.
It’s not actually the text indent, rather it’s a very narrow TextInput which is used to capture text if the user wants to add a new selection by typing to the left of the selected item. You could try modifying the source to hide the component, it’s the ShorterTextInput at the bottom of SelectedItem.mxml.
Thank you Hillel, that indeed do the trick.
Hi,
Thanks for your reply.
And yes, autoselectenabled=false does prevent entering single words. However, when I want to insert a sentence with one or more comma’s, it keeps entering the unfinished sentence on typing the comma. Is there a way around this? Or is this just one more stupid question…..?
I wish I could look for a solution myself, but I wouldn’t know where to look.
Try setting the delimiter property, the default value is a comma which would explain your issue.
The best way to look for solutions is to reference the documentation page as well as the ASDoc files (which are linked to at the top of the documentation page). If you can’t find the answer though I”m happy to try to answer your questions.
Thanks for your kind reply. I am really at a loss here. Up to now I’ve worked with permanent data collections. Now that I’m trying to do the same with dynamic data I have trouble understanding what goes wrong and where. So here’s another question:
When I get the data first (the full data collection), all goes well. But now I use the autoComplete.change event to get a selection based on the searchText. However, in the change eventhandler function the autoComplete.searchText appears to be an empty string (which gives me the full data collection instead of a selection) and the call search() does NOT show the dropdown list.
What am I doing wrong here?
Try using the searchChange event instead, it’s dispatched when the user changes the search text.
Thanks again.
Using the searchChange event did the trick for my autoComplete, but …… the searchChangeHandler of my ADVANCEDAutoComplete (next view state) fires spontaneously on Application start!!!!!
Hmm… it’s possible it’s a bug with the component. You may need to modify the source to make sure the event isn’t dispatched until the component is fully initialized. A simpler solution may be to figure out a way to ignore the event. Sorry, I realize this isn’t the most helpful response.
Hello,
First of all thank you for this component.
I’m kind of new to flex and all its wonder so excuse me if my questions are strange or hard to understand (some times I have a hard time understanding them myself).
I’m trying to do “another kind” of auto complete then the ones in your examples. In my project we are trying to do a auto complete that should work as the ones in developing programs (ex Eclipse, Netbeans, Flash Builder, ect). I have a set of objects that has attributes (ex object1 has attributes x and y => object1.x and object1.y and object2 has attributes w and h => object2.w and object2.h). I use these objects and its attributes as variables to write formulas (ex object1.x + object2.w).
So to my questions:
1. I need the auto complete to be two levels. The second level of auto complete should depend on which object is selected on the first level. Is this possible? I have experimented with the showDropDown functions but haven’t really worked it out. Any help or an example where some one else has done it would help a lot. I saw in a comment that someone else were trying to do something similar but didn’t find any actual solution.
2. In my TextInput I need to allow characters between the auto complete variables (ex 1.3 * object1.x + 0.5*object2.w ) to make it simple I need the auto complete to “start” when I write an character(a-Z). I’m having problems with this if you could give me a hint on how to solve it would help me a lot because now I’m all lost.
Thank you again and I hope to hear from you.
First off… welcome to Flex
I’m sorry, but I’m not sure how well my component is going to suit your needs, this is pretty far removed from its standard behavior. If I was tasked with creating your app I don’t think I would use it. A simpler approach may be to use a standard TextArea component and add the required logic/dropDowns/etc.
If after reading this you’re still not convinced, here are some pointers…
1. The items shown in the AutoComplete are really just Button with the toggle property set to true (this can be seen in the SelectedItem class). You should be able to loop the FlowBox’s children to determine which item is selected.
2. You could try listening to the searchChange event (which fires when the user enters text) and adding some custom logic. Alternatively, you may be able to dynamically change the filterFunction. You could selectively make it so that no matches are found which in theory should turn on/off the AutoComplete.
Hope this helps