Developer's Blog

I had to know if the user choosed the value from existing values of the AutoComplete component, or he wrote it down, thus defining a new entry. For instance, if he has selected it, my application brings back from a server a serie using the selection. If the value was written down by the user and it is not present in our collection, so we can trigger a form in which the user will input the new definition.

Also, I’ve added a clear method to the component, because I got a bug : after filling the ArrayCollection (changes from null to something) which feeds the component with values came from a server, the component autoselects the first value by default, which is not normal wanted behavior. So, after filling the Array collection, I’m calling the clearThis method of every Autocomplete component in my application (you can do this by adding an event listener on COLLECTION_CHANGE, or manually).

Modifications :

#1. Added 2 events : one for triggering the fact that user wrote down the TextInput.text value and one for each time modifications occures, so we can reset details due to reset of AutoComplete – [Event(name="valueWritten" , type="flash.events.Event")] and [Event(name="resetCollection" , type="flash.events.Event")]

#2. in the overrided function for commitProperties, we trigger the fact that collection has been reset. Prior to this modification, the selectedIndex was 0, but I think that it needs to be -1.

#3. in the keyDownHandler, we will trigger valueWritten if the user pressed ENTER key, and the selectedIndex is -1.

#4. catching close event of this component we can process the selected from dropdown value (either with the mouse or keys)

Abstract usage:

1
2
3
4
5
6
7

<adobe:AutoComplete id="myAC" dataProvider="{myShortArrayCollection}"  close="{myAC.selectedIndex!=-1 ? loadDetailsToDisplayForm(myAC.selectedItem) : trace('ignoring due to no selection, so writtenValue trigger can act');}"
valueWritten="{newDetailsToBeInserted()}"
resetCollection="{resetDisplayForm()}"
openDuration="0"
width="200"
dropdownWidth="200"
closeDuration="0" />

Real scenario with the above details :

Let’s say you have an AutoComplete field for the counties from a country, from which you will bring into the application the list of major cities for that county. This list is myShortArrayCollection and contains only names of the counties and their unique ID’s for the database query. Now, if value of AutoComplete is written (no data was available for autocompletion) this means that we will define a new county and let’s say city of residence. We’ll do this by calling newDetailsToBeInserted() which will bring up a form for user to complete (modal, ofcourse…)

If the user has selected a value from our dropdown, will bring from the server the list of cities using loadDetailsToDisplayForm. From the selectedItem of our AutoComplete Input we will extract the ID and query the database. As you can see, we’ll do this only if the selectedIndex is not -1, which says that the value was not selected so there is a possibility that the value was written.

If the resetCollection event occured, we’ll clear the cities informations because the AutoComplete Input has modified and errors might interfere. We are sure that after reset will occure either a valueWritten event, or close event which might show that the value was selected.

The close event doesn’t imply that the user selected a value from AutoComplete Input mainly because the user can press ESCAPE to hide dropdown (which triggers a close event).

The source of the modified component can be downloaded from here.