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
Hillel Coren 
Been using the component for awhile. Very nice. Just noticed though some behavior with the TAB key that I need to adjust. Some of the end users here will start typing in the field, thus getting the drop down list. They then use the arrow keys to get to the item they want. Once the item they want is highlighted, they hit the TAB key. After hitting the TAB key, the drop down disappears, the text they selected is shown in the field and the cursor moves to the next item in the form. However, even though the text appears in the autocomplete field, the selectedItem(s) does not get updated with the correct value. It seems as if the TAB function of moving between form fields is overriding the autocomplete code. I tried modifying the source code (handleKeyDown) to make the tab key act exactly like the ENTER key, but to no avail. How can I make this component work the way these end users expect when it comes to the TAB key?
Matt,
I’m sorry, I’m not able to replicate your issue. Which version of Flex are you using. Also, you may want to try creating a simple test application to check the component.
Hi
When I using Autocompleter, After selecting item one rectangle shows to me. If you focus next elements it hides. What is the issue
Gobi,
I’m sorry, could you please explain your issue in more detail. Also, are you using the source code or the SWC (if you’re using the code please try using the SWC instead).
Hello Hillel,
I just wanted to thank you for your great work. I used your control on a project of mine and wanted to give you credit. I wrote a blurb about it on my site at: http://www.tikalk.com/flex/flex-auto-complete-control
Thanks again,
Dov
Dov,
Thanks, very much appreciate it 😀
Best,
Hillel
How can I get the the browser not to show multiples if the browserfield value is the same?
Example: My data provider has 2 very different items, but they happen to have the same value for the browserfield I’m using. I only want them to show once. Any thoughts?
Adam,
You should be able to set a filterFunction which hides the second one.
Love this! I do have one question, I wrote a quick function for all my text boxes to escape out the ‘s before I insert them into sqlite. My funtion is as follows:
private function handleInsert() : void
{
var ascPattern:RegExp = new RegExp(“‘”, “g”);
var iascString:String = coman.text;
rirignum.textInput.text = String(ascString.replace(ascPattern, “””) );
This works for every other text box and I have tried rirignum.text to no avail. Here is how I have my sutocomplete set up:
Any help would be appreciated and thanks again!
Josh,
WordPress swallows the MXML, could you please either repost using & lt;/& gt; or email it to me.
Thanks,
Hillel
& lt;& gt;
Sorry I should have caught that.
congratulations on the excellent component.
I wonder if this has something default component to change the focus
AdvancedAutoComplete component to another component, because I made a
function in my program that I gave when he took a Enter the next
component of the screen and focus on it setava
Tiago,
I’m sorry, I’m not clear on what you’re trying to accomplish. Could you please try explaining it another way.
Hi Hillel,
Great component – thanks a lot!
I wanted to show the full data provider list on focus in, so implemented your suggestion from http://hillelcoren.com/flex-autocomplete/documentation/#comment-1189. It worked, but I discovered that if I click multiple times on a selected item within the control the app crashes. I added the following check for relatedObject in the handleFocusIn function to ignore events when the focus is already within the control:
private function onFocusIn(e:FocusEvent):void {
if ( (e.relatedObject as DisplayObject == null) ||
this.owns(e.relatedObject as DisplayObject)) {
// Don’t take any action if focus was already within auto-complete
return;
}
this.search(); // This makes sure that selectedItems is properly updated and those items
// are grayed out by the dropDownLabelFunction
callLater(_showDropDown); // Call later to override its hiding …
}
This solved the problem (at least as far as I can tell), so I figured I’ll post it here for others. Note that this is within a subclass of AutoComplete.
Also, I had to call search() because sometimes the last selected item was not properly grayed out in my dropDownLabelFunction (maybe a difference of using selectedItems vs. _selectedItems in the default function?).
One question: I’d like to show the full drop down list again after the user selects an item (similar to when they click in the control), to encourage the selection of more items. Any thoughts on where I can add that?
Thanks again!
Micah,
Thanks for submitting the fix.
As for your question, you should be able to accomplish that by adding an event listener for the change event and then calling showDropDown.
Hi Hillel,
I’ll try your suggestion shortly. In the meantime, I think I found a bug that relates to re-selecting an item that is already selected (displayed as grayed-out).
I’m setting:
allowDuplicates=”false”
allowMultipleSelection=”true”, and backspaceAction=”remove”.
If I have some selected items and I try to re-select one of them from the drop-down list, nothing seems to happen (the list closes), which is as expected. However, looking at selectedItems, the item that was clicked actually changes position and becomes the last item (I’m guessing this is the result of removing and re-adding the item, which is what is occurring for some reason). This is still not a problem per se, but I’m guessing is the cause of the following problem:
If I click on one of the selected items in the flowBox or position the cursor between some items as a text cursor (‘I’), and I now press the backspace button, this is what happens:
– In the flowBox, the “correct” item is removed – i.e., the one that was highlighted or just before the ‘I’ cursor.
– However, in selectedItems a different item was removed – the last one it seems. I’m guessing the above change in selectedItems order due to trying to select again an item already in selectedItems has something to do with the problem.
Sorry for the long post – hope this makes sense. BTW, I removed the focusIn handler just to make sure it has nothing to do with this issue.
One more comment: I would really like to just disable the user from clicking on an already selected item. That is, if the drop-down list is shown and the user clicks on a selected item, do nothing and keep the drop down shown. This would be more intuitive for users and could also be a workaround for the above problem (if my guess is correct as for the cause). Alex Harui has a post on an extended list that allows that at http://blogs.adobe.com/aharui/2007/06/disabling_list_selection.html. I haven’t tried it, but you could use that instead of List and the disabledFunction could optionally check if an item is selected.
One more question/suggestion:
On each selection change by the user, I need to know which item was added or removed. Is there an easy way to get that?
I didn’t see that info with the ‘change’ event so the only way seems to keep a copy of selectedItems and compare it to the new one, which I’m currently doing but it’s a pain.
I also tried to add a handler to COLLECTION_CHANGE event on selectedItems, which works nicely except that it also generates a remove and add events when the user selects an already-selected item, as I mentioned above. That creates a bunch of problems for me as I need to ignore these but couldn’t find a good way.
Would be great if the change event would have that info (add/remove and item), or perhaps add a couple of different events for add and remove.
Thanks again,
Micah
Hi Hillel,
I tried your suggestion for calling showDropDown() on change event and it works, with some additions. Here are my findings – hope this helps others.
As a reminder, my goal is to have the full drop-down list shown whenever there is focus and no searchText, to prompt the user with all possible items.
I’m doing this on 3 occasions:
1. On focusIn event.
2. After the user changes the selection (add/remove item).
3. When the user starts to enter search text but then backspaces until no text is left to filter with.
Here’s how it’s done:
1. As shown in comment http://hillelcoren.com/flex-autocomplete/documentation/#comment-3118 above.
2. Added a ‘change’ event handler that has:
this.searchText = “”; // to clear the last search filter
this.search();
callLater(_showDropDown);
3. Defined a class variable:
private var searchTextWasUsed:Boolean = false;
and added a ‘searchChange’ event handler:
private function onSearchTextChange(e:Event):void {
if (this.searchText == null) {
return;
} else if (this.searchText.length > 0) {
searchTextWasUsed = true; // Flag that there was some search text
} else if (searchTextWasUsed) {
// We had some search text but now it’s empty – show full drop-down list
searchTextWasUsed = false; // It’s empty now
this.search();
callLater(_showDropDown);
}
}
There’s one more critical change in the _showDropDown() function:
private function _showDropDown():void {
if (!this.isDropDownVisible()) {
showDropDown();
}
}
It seems that in some cases _showDropDown() is called-later more than once and tries to re-display dropDown. This causes a nasty crash with a trace like this:
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\framework\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()
at mx.managers::PopUpManager$/addPopUp()
at com.hillelcoren.components::AutoComplete/showDropDown()[/Users/hillel/Code/flex-autocomplete/src/com/hillelcoren/components/AutoComplete.mxml:1178]
at com.hillelcoren.components::AutoComplete/handleFlowBoxChange()[/Users/hillel/Code/flex-autocomplete/src/com/hillelcoren/components/AutoComplete.mxml:1091]
[…]
Adding the check if dropDown is visible seems to eliminate the problem. BTW, this is the same crash I mentioned with the focusIn handler, so the check on relatedObject there might be superfluous.
The only case I saw that the above does not handle, is if the user presses Esc to dismiss the drop-down – it is not show again. I suppose one can check for that, but I’ll leave that to another day.
Hope this is helpful, and I’d love to throw all my code away if the next version has this built-in 🙂
Micah
Hi Micah,
I’m interested in doing what you’ve described. Is it possible to get the modified classes from you directly?
Thanks, Garry
Hi Gary,
I have some proprietary code in my subclass that is not relevant, so will need to clean up just the generic AutoComplete extensions. I’m traveling the end of this week, so it might take a while.
In the meantime, the only parts I haven’t posted yet are for keeping track of selectedItems to figure out what item was added or removed. For that I:
1. Defined at the to of the class:
private var prevSelectedItems:ArrayCollection = new ArrayCollection();
2. When setting selectedItems before displaying the AC control (e.g., for pre-selected items as returned from the server), I include:
this.selectedItems.removeAll();
this.prevSelectedItems.removeAll();
and for each:
this.selectedItems.addItem(item);
I also do:
this.prevSelectedItems.addItem(item);
3. in the ‘change’ event handler, I have:
var i:int, j:int;
// Analyze selectedItems by comparing to previously stored copy to see what was added/removed.
if (this.selectedItems == null || this.selectedItems.length == 0) {
// no selectedItems so if there's anything in prevSelectedItems it was removed
for (j=0; j<this.prevSelectedItems.length; j++) {
// prevSelectedItems[j] was removed - handle it as you wish
}
prevSelectedItems.removeAll();
} else {
// Go over selectedItems and see if it has any items not in prevSelectedItems
for (i=0; i<this.selectedItems.length; i++) {
if (this.prevSelectedItems.getItemIndex(this.selectedItems[i]) < 0) {
// Newly added item - do something and add to prevSelectedItems
// selectedItems[i] was added - handle it as you wish
prevSelectedItems.addItemAt(this.selectedItems[i], i);
}
}
// Now go over prevSelectedItems and see if it has any items not in selectedItems
j = 0;
while (j<this.prevSelectedItems.length) {
if (this.selectedItems.getItemIndex(this.prevSelectedItems[j]) < 0) {
// Removed item - do something and remove from prevSelectedItems
// prevSelectedItems[j] was removed - handle it as you wish
prevSelectedItems.removeItemAt(j);
// We do not increment j as we need to examine the j'th item again because it was
// the j+1'th item till we removed the j'th item
} else {
j++;
}
}
}
That’s about it. Please note that I haven’t tested this extensively yet.
HTH,
Micah
PS. Sorry for the lack of code formatting. I tried to wrap in
but that didn’t work either.First, thank you for providing this excellent component!
I have a question: how can I add items to the AdvancedAutoComplete component on init?
Ok I found out, so I share:
private var _data:XML;
private var ac:ArrayCollection;
private var tagArray:Array = [];
public function set data( value:XML ) : void
{
_data = value;
tagAutoComplete.dataProvider = tagsXMLList;
_data..tags.tag.
(
tagArray.push( attribute(“name”) )
);
ac = new ArrayCollection( tagArray );
tagAutoComplete.selectedItems = ac;
…
Hi,
Awesome work. It helps me a lot. I expect one more feature in this. How to set selectitems values when it load. Selected Items has more than one.
Gowdham,
I’m not sure I’m following your question, you should just be able to set the value for the selectedItems property.
ie, autoComplete.selectedItems = new ArrayCollection([“test”,”test”]);
Hello,
I liked your component very much. I would like to have a look at the source code and make contributions, if I can (I am still a beginner). I have flex builder 3.0 and I am trying to import your source code but it is saying that it is not a valid Flex project archive file. I downloaded it from here – http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1721530. Please let me know I I can import the source code of the latest version of your component.
Abhishek,
I’d check to make sure you’re using the Flex 3 version of the source. You could also check the code out from the google code site (http://code.google.com/p/flex-autocomplete/source/checkout).
First, this is an absolutely excellent component and you’ve saved me hours (days more likely) of work. I would like to change one thing, currently the delimiter used is a comma, but my name field contains commas (lastname, firstname) so I would rather use semi-colons (which is used all other fields) is there an easy way to substitute the comma for a semi-colon?
Thanks again for the great work.
Disregard. The delimiter parameter didn’t seem to work initially, but I moved it after setting allowMultipleSelection to true and all is well with the world. Thanks again.
Okay, maybe not. I have the delimiter property set, but yet it isn’t working. It worked the first time, but not since. Any suggestion?
Sean,
You’re in luck… in the latest version (1.1) I’ve just added a ‘delimiter’ property which I think is what you’re looking for.
Best,
Hillel
Hillel,
You are absolutely correct and just by chance found that, but I’m running into a small problem with it. I know it must be something I’m overlooking.
Sean
i was looking for the same functionality and the “delimiter” property is only for a kind of select or enter action. For example if i define delimiter=”z” the z key will make the same action if I press the enter key, so an item of the list will be selected once i write a “z”
cat,
If I’m understanding you correctly, I believe that would require using the source code and making a small modification to the handleKeyDown function in AutoComplete.mxml.
I think I understand my problem. In my enthusiasm to use your component, I included BOTH the SWC and the COM folder. Of course, over two different periods. So I’ve been updating half and the other half is running default.
Of the two, which do you suggest using, the COM or the SWF?
Sean,
If you don’t need to make any modifications to the source then I’d definitely recommend using the SWC
Perfect, then I’ll pull out the COM folder and add the SWC back in. Thanks for all your help.
Well It’s me again. I’ve removed the COM folder and included the SWC and the component functions great except for the delimiter. Regardless if I have the semi-colon in the delimiter property it continues to place a comma. Any suggestions?
Sean,
I’m sorry, I’m not sure.. I’d double check that you’re using the latest SWC. I’m currently traveling and won’t be home till early next week. I’ll test it out when I get back.
Hillel,
Once again disregard. I closed out my system and reboot and everything worked perfectly once I opened it up again. Thanks again for all your help, and enjoy your travel.
Sean
Hillel
First off, thank you for sharing your awesome work with all of us – it is a thing of beauty. I hate to bother you with questions, but I think you may be able to super quickly point me in the right direction. What I’d like to do: use a data provider containing long strings (e.g. “1 – list item one”, “2 – list item two”) for performing searches and for the dropdown list, but then only display the number if the item has been properly selected / entered. I thought I could do this splitting the string in a number field and a name field, using the number as a labelField and creating a dropDownLabelFunction that combines both fields for the dropdown list. This works but the search is performed only on the number string. I also tried the opposite approach – use full strings in the DP and then have a labelFunction that extracts the part I want to display – unfortunately that also doesn’t seem to do the trick. Any thoughts on obvious ways to accomplish this?
thank you!
f
fedster.
You’re definitely on the right track… try you’re first approach along with a custom filterFunction to handle the custom search.
Awesome – followed your advice and everything worked out beautifully. Your component is fantastic and I really want to use it in my code. Unfortunately, I found one more issue that may be a critical road block for me. In my DataGrid I use a mix of spark and mx itemEditors – would love to use only spark components but unfortunately some of the components I need haven’t made the leap yet. In order to get a uniform look and feel between the various itemEditors I’ve been (happily, up to today) using the “Use Flash Text Engine in MX components” compiler option (it’s the top one in the Flex Compiler page for the project’s properties in FB4). After noticing some weird behavior with one of the demos that I had built with your components and a fair amount of research I’m pretty sure that this option is messing with the way the various entries in the dropdown for the autocomplete components are displayed – in essence some are not displayed at all and some disappear when hovering over them. Haven’t dug any further yet, but would love to help find a solution / workaround if you have any idea on what direction I should dig in next.
thank you!
f
fedster,
It looks like that option isn’t supported when using the mx classes.
http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f-26a13bbf123c441239d-8000.html
To work around this you’d need to try to change the core TextInput (aka ShorterTextInput) to use the spark framework.
The generated documentation are offline. Could you please put them back up?
Toby Ho
Sorry for the really slow response. The documentation is also available in the download, will fix online soon.
Best,
Hillel
Hillel
happy to give it a shot. Somehow, I must admit with shame, I can’t seem to be able to set up the flex 4 project for the source code – i get a huge amount of errors that mostly seem due to wrong paths. Is there an obvious way? Am I missing something?
thank you!
f
Hello
I am trying to change the backgroundColor of the autocomplete component however when set the type-ahead search does not work. I tried using a skin and also setting backgroundColor directly such as below.
chouwa,
It isn’t the prettiest code, but…
autoComplete.flowBox.setStyle( “backgroundColor”, );
autoComplete.textInput.setStyle( “backgroundColor”, );
autoComplete.textInput.textInput.setStyle( “backgroundColor”, );
Is the asdoc anywhere besides here:
http://web.me.com/hillelcoren/Site/AdvancedAutoComplete.html
I can’t get into MobileMe.
mitch,
Sorry about that, I’m no longer using my mobileme account. The documentation is also in the download.
HI, I have this error with you application
TypeError: Error #1034: Type Coercion failed: cannot convert _com_hillelcoren_components_autoComplete_classes_DropDownItemRendererWatcherSetupUtil@7da191 to mx.binding.IWatcherSetupUtil2.
at _com_hillelcoren_components_autoComplete_classes_DropDownItemRendererWatcherSetupUtil$/init()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::kickOff()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2620]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::preloader_completeHandler()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2539]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()[E:\dev\4.x\frameworks\projects\framework\src\mx\preloaders\Preloader.as:515]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
THIS IS THE CODE
rinaldo,
Sorry for the delay (working on something new which is taking up all of my free time). The code didn’t make it through, could you email it to me.
Hi, I am using AutoComplete as a component in advanced data grid as one of a column.Also having the feature to add rows in the data grid.Everytime when i add new row in the grid , new Autocomplete column will be added in each new row.My problem is the selected value of autocomplete in the first(all previous) row of grid ,is changing to default value soon after when am adding new row in data grid, i have set some default value for Autocomplete combo whenever i add new row to the grid.i am using same data as the dataprovider for all the autocomplete.i think the changes made in one autocomplete taking effect in all. how to overcome this problem.. please help..
help will be appreciated..
kapil,
Maybe try giving each autocomplete it’s own arraycollection. Something like…
autoComplete.dataProvider = new ArrayCollection( arrayCollection.source );
hillel,
Thanks for your reply… Here with am pasting the code… could u please help me out
1) this function uses to add row in the Grid
private function addRowFunction():void
{
if (sumAmountOfReqList())
{
lastGridIndx=0;
var selGridItem:Object;
_lstGridArray=new Array();
for (var i:int=0; i < lstGrid.dataProvider.length; i++)
{
lastGridIndx++;
selGridItem=lstGrid.dataProvider[i]as Object;
_lstGridArray.push({num:lastGridIndx, itemDesc:selGridItem.itemDesc.toString(), enabVal:selGridItem.enabVal, autoservice:selGridItem.autoservice, billSelIndx:selGridItem.billSelIndx, projSelIndx:selGridItem.projSelIndx, amount:selGridItem.amount.toString(), ccCode:selGridItem.ccCode.toString()});
}
lastGridIndx++;
_lstGridArray.push({num:lastGridIndx, itemDesc:'', enabVal:true, billSelIndx:0, projSelIndx:0, amount:'0', ccCode:'0'});
lstGrid.dataProvider=new ArrayCollection(_lstGridArray);
}
}
2) this is my datagrid
hi hillel,
Any solution… 🙂 waiting for your reply…
kapil,
Sorry, I’ve been pretty busy lately. It looks like half you code got cut off. Could you please either repost of email it to me.
Thanks,
Hillel
Hi Hillel,
Please don’t mention(Sorry,).. anyway Thanks a lot for your reply. i will email the codes to you….
Thanks,
kapil
Hillel
sorry to bother you but somehow I can’t seem to be able to setup the project files for the component source code. Do you know if anyone has had similar issues? Any advice on how to proceed?
thank you!
f
fedster,
Check that you have the latest zip file. In the old zip, the source code is for Flex 3 and you have to uncomment lines to make it work in Flex 4. The new zip has separate folder for the Flex 3 & 4 source.
I think I have the latest and greatest. I can’t seem to import the project in Flash Builder 4 by pointing the import UI to a specific folder in your tree. I generally end up pasting the files in by hand but then all paths seem to be screwed up. What am I doing wrong?
sorry to take more of your time.
f
fedster,
I’m assuming you’re using the source b/c you want to make modifications the code. The best approach is to create a library project using the source code and then add the library project to your main project.
got it. Sorry it took so long 🙂
f
We have an AdvancedAutoComplete that is not looking good. Please see 2 pictures:
Have you seen this before? Any ideas how to fix it? Thanks.
mitch,
Is there any chance you’re using the Flex 3 version of component in a Flex 4 project?
We are using this one:
97934 Oct 24 14:35 AutoComplete-1.1-Fx4.swc
mitch,
Hmmm.. ok, I’m not sure then. If you could put together a sample application which demonstrates your problem I’d be happy to debug it.
It took a little while but I figured out the problem. AutoComplete-1.1-Fx4.swc is built for Spark, which makes sense. Our project is Flex 4 but we are still using Halo. Using that .swc with a Halo project isn’t quite working.
Could you tell me the mxmlc command you use to build the .swc? I’ll modify it to build with Halo instead and I think that will fix things. Thanks.
Comment about this forum:
when I click the “Notify me of follow-up comments via email” checkbox it subscribes me to all comments about AutoComplete. Is there a way to just subscribe to one or two discussions without getting all of them?
mitch,
I’m sorry, I’m not sure if that’s possible.
Hillel
I hope this is the last time I bother you and hopefully this will be easy. How can I programmatically add a string to the autocomplete textinput and then open the dropdown as if I had typed that string in?
I tried to do the following (assuming s is the string I want to add)
ac.textInput.textInput.text = s;
ac.searchText = s;
ac.showDropDown();
ac.textInput.textInput.selectionBeginIndex = 1;
ac.textInput.textInput.selectionEndIndex = 1;
this gets me mostly there (the string gets added, the cursor gets positioned at its end, the dropdown opens). However the values in the dropdown are not filtered as if I had typed directly in the TI. I’m sure there’s something in your code that does exactly what I need but have not been able to find it.
thank you!
f
fedster,
add a call to search() after setting the search text
fedster,
Try adding a call to search() after setting the searchText property.
yes, indeed, that does the trick. Thank you. And now for a little stranger question: I’d like for a certain function foo to be called every time the user has entered a value in the autocomplete component (e.g. I’ve added a new name to an email list and want to call foo on such name). I tried to listen to when selectedItems changes and check whether its length actually changed and this seemed to do the trick. However, if I call function foo on the data I get this really weird behavior where the value that was just entered in the AC does not show up in the AC itself, although it was clearly processed. I debugged this and clearly selectedItems will have the new value right up to the point when I call foo, and then the value is gone. So, I debugged some more and noticed that the ac.dataprovider is also changing at this point (or so it seems) and basically accepted the fact that I’m not sure I understand enough about all the phases of AC’s life to solve this problem. Somehow my guess is that if I called foo after AC was completely full done updating itself this would not happen, but I’m not sure that’s the case, and more importantly, I’m not sure what event to listen to or what function to override in order to be sure that AC is done updating. I realize the issue could also be with foo, although I have a hard time understanding why that would be the case. What I’ve noticed in general is that if I use a dataprovider for the ac component that is also being used by something else trouble happens – I now make a shallow copy of it and seem to have less trouble, but still some. Anyway – any pointers on where to dig, or what event to listen to?
thank you again!
f
Ok, if use a completely different (i.e. not a shallow copy) ArrayCollection for the ac.dataProvider all seems well.
Hillel
I’m trying to programmatically select one of the possible items in the dataProvider and add it to my selectedItems list. I’ve tried addItem, which seems to work, or adding the element directly to selectedItems. Weirdly, though, this does not seem to create a change Event to go off, i.e. my changeHandler does not wake up after I do one of the above. Am I calling the wrong functions, or should I shoot the event myself, or am I totally off?
thank you for your help, as always.
f
fedster,
That’s the correct behavior. If you set the selected items programmatically the component won’t dispatch a change event. If there is code you’d like called after the item has been added you’ll need to call it manually.
To get it to look good in our application, we had to make two small changes. We needed ActionsMenu to be styled so it would look good with some other styling we had done to the default Menu class. In ActionsMenu:
and in defaults.css:
.actionsMenu
{
background-color: #FFFFFF;
}
Then the other thing we had to do was build the library with Halo as the default theme instead of Spark.
Would you be interested in incorporating these changes? Thanks.
I see that the blog software didn’t accept mxml syntax. The change to ActionsMenu was right at the beginning: removing the backgroundColor declaration and adding styleName=”actionsMenu”.
mitch,
Thanks very much for sending in these changes, I’m not sure though if they’d be beneficial to most other users of the component.
Best,
Hillel
Using Flex 4.5 (latest build) but cannot type anything into auto complete field. It highlights when I click into it, but that’s all.
David,
Give this change a try to see if it helps… http://hillelcoren.com/2009/07/03/flex-autocomplete-version-1-0/comment-page-1/#comment-2190
The links to asdoc are incorrect and point to mobileMe. (I already noted that a while ago.)
The asdoc that comes with the download also seems incorrect. AdvancedAutoComplete.html has no styles and no inherited styles. AdvancedAutoComplete inherits from AutoComplete. AutoComplete.html has 2 styles, so those should be shown as inherited inside AdvancedAutoComplete.html, right? And in AutoComplete.html there are no inherited styles.
I would like to be able to style the component by at least starting with the docs before reading the code. Was the asdoc generated incorrectly?
mitch,
Yeah, sorry about that… the as docs are a bit out of date. I plan to update them with the next release.
When I type in a string it looks OK:
but afterwards when it’s displayed it looks bad:
What styles can I use to choose a better color? Thanks.
mitch,
I’m not sure, I’ve never seen that before. How are you using the component (ie, what styles are you setting)
I was using selectedItemStyleName=”underline” and it looked like that. I changed to another style and it looks better. It would help if the asdoc had the list of available styles.
I am working on an course Latin Grammar (in Adobe AIR) for the University of Amsterdam and I have been struggling for weeks to come up with something like your Advanced AutoComplete. I has provided me with an efficient and elegant solution for working with questions with multiple answers.
Many, many thanks for your excellent work!!!
I am having trouble utilizing your demo in what should be an easy way. I want to simply search through various terms and display the selected or chosen item in another text window NOT change the background color – since the data provider is terms and not colors anyways.
So I figured understanding how you use the term searchText would help me solve the issue but in the AutoComplete.mxml I am not seeing clearly where you finally determine that either the match is made based on the enter key or mouse click event. Am I looking in the wrong class?
As everyone else already pointed out – its a great component but I am a little slow in truly understanding all its complexities.
Ray,
All of the keyboard events are handled by the handleKeyDown function. The mouse click is handled by handleDropDownItemClick. In the component I don’t really distinguish between keyboard and mouse selections though.
Hope this helps,
Hillel
I found your blog site on google and examine a couple of of your early posts. Continue to maintain up the excellent operate. I simply further up your RSS feed to my MSN Information Reader. Seeking forward to reading more from you afterward!…
Hi,
Thanks for the good work on this component. I’m having an issue trying to get it to drop down after returning search results from the server. I am using:
AutoComplete-1.1Fx4.swc
I am currently using flex SDK 4.1.
In my MXML i have:
components:AutoComplete x=”89″ y=”97″ width=”174″ id=”cmbProducer” labelField=”producerName” dataProvider=”{this.prodList}”
where this.prodList is an ArrayCollection.
In my mediator, I have three methods:
protected function producerTimer_handler(event:KeyboardEvent):void {
do {
if (event.charCode == Keyboard.ENTER)
break;
if (StringUtils.isBlank(this.view.cmbProducer.searchText)) {
producerTimer.stop();
break;
}
if (this.view.cmbProducer.searchText.length > 3) {
producerTimer.reset();
producerTimer.start();
}
} while (false);
return;
}
protected function searchProducerIndex_handler(event:Event):void {
this.view.prodList.removeAll();
this.view.cmbProducer.enabled = false;
dispatch(new WineServiceEvent(WineServiceEvent.SEARCH_PRODUCER_MASTER, this.view.cmbProducer.searchText, 0));
}
protected function showProducerResults_handler(event:WineServiceEvent):void {
do {
trace(“XML = ” + event.results);
if (event.results == null)
break;
// we need to put this into something that can be used.
var obj:Object = null;
this.view.cmbProducer.enabled = true;
for each (var xml:XML in (new XML(event.results)).children()) {
obj = new Object();
obj.producerId = parseInt(xml.Col.(@name==”PRODUCERID”));
obj.producerName = xml.Col.(@name==”PRODUCERNAME”).toString();
this.view.prodList.addItem(obj);
}
this.view.cmbProducer.search();
} while (false);
return;
}
The call goes to the server fine, come back and goes into the showProducer_handler fine as well. The arrayCollection gets all of the items added as I would expect. However, the dropdown never shows and all it does is clears the text input box. I’ve tried adding this.view.cmbProducer.dropdown(), but that throws a null pointer exception.
What am I doing wrong?
Thanks for your help.
Tom,
I’ve seen this problem. I believe it’s somehow related to the timer and/or setting enabling/disabling the AutoComponent component.
Here’s a (not so pretty) workaround to try…
Replace autoComplete.enabled = false with:
autoComplete.flowBox.textInput.textInput.editable = false;
autoComplete.flowBox.textInput.textInput.setStyle( “color”, “#888888” );
And replace autoComplete.enabled = true with:
autoComplete.flowBox.textInput.textInput.editable = true;
autoComplete.flowBox.textInput.textInput.clearStyle( “color” );
– Show quoted text –
Thanks Hillel,
I’ve tried your suggestion. The text that I entered now doesn’t go away, but it doesn’t drop down the list. There are 11 entries that match in the list, but for some reason the drop down doesn’t open.
Any other ideas?
Thanks,
Tom
Hi Hillel,
Thanks for your help. I loaded the source code so I could figure out what was happening and it was a programmer error. The data provider was being overwritten in a different part of the program and nulling it out.
Thanks,
Tom
Hi Hillel,
I tried the following int eh click event of the AC component.
trace(myDataProv.length); trace(myDataProv.getItemIndex(mailAddressInput.selectedItem));
I am getting correctly the length of my data provider, however when I click on a specific item in AC, it gives me the last one always. It does not seem to respond and identify each item individually.
Also when I add a new item manually and then click on any item..then it gives me the length as 0.
Am I missing smth here?
Best Best
AshRoc
I instantiated the component in my application. Whenever data is selected from the dropdown, a button appears with the data as a label. How do I disable the button and just get the data to show up as simple text ?
Great component!
There is, however, a bug. When defining a selectedItemStyleName, as can be seen in defaults.css, one can define “font-weight” and “selected-font-weight”. While the latter works, the former does not.
In IconButton.mxml -> updateDisplayList(), in case the button is selected, the “selected-font-weight” property works as expected, but in opposite case the font weight is set unconditionally to “normal”, disregarding the “font-weight” style!
Aavo,
Thanks for submitting the bug (and pointing me to the source of the problem), I’ll include a fix in the next release.
Best,
Hillel
Hi Hillel,
I still couldn’t figure out how to make an item editable in the AutoComplete component. Basically I want the user to double-click on an item, upon which it becomes editable and after editing the user can tap Enter and the component item hardens into its renderer again.
Could you please guide me through this modification?
Many thx
AshRoc,
You’re probably going to want to remove the item when it’s double clicked and replace it with an editable item.
Yes that is what I want to do actually. Any hints on this piece of functionality Hillel?
Thanks for your help.
You may want to look at the code related to the allowEditingSelectedItems property as it’s closely related to what you’re trying to accomplish.
You mean the allowEditingSelectedValues, I will this right away and let you know of any issues.
Thx
Hi Hillel,
Upon double clicking I am listening to the following function (see code below). So I can get the item I am selected and it appears in the textInput. But the textInput appears at the end of the component, that is after all the items in the component.
Is there a way to make it as such: that is I double-click and the item gets editable at the place where it is?
Any hint on this please.
Many thanks.
private function handleDoubleClick( event:MouseEvent ):void
{
var target:iComboItem = determineFocus();
var index:int = flowBox.getChildIndex( target as DisplayObject );
var item:Object;
if (_allowEditingSelectedValues && ((_selectedItems.length – index) >= 1) )
{
item = _selectedItems.getItemAt( index);
_selectedItems.removeItemAt( index);
dispatchEvent( new Event( Event.CHANGE ) );
var label:String = labelFunction( item );
searchText = label.substr( 0, label.length ); // -1
textInput.setFocus();
textInput.setTextSelected(false);
}
}
AshRoc,
To accomplish that you’ll probably need to modify the addItem function in AutoComplete.mxml.
Hello Hillel,
I had a look at the ‘addItem’ function. What I gathered from the function is that it removes the item by listening to handleItemRemove fucntion. And then the selectedItem is being added in the flowBox.
However I still fail to understand how to edit the addItem into the code to be able to modify an item at its current position?
Your precious help is required.
Thx
The call to flowBox.addChildAt in the addItem function controls where in the FlowBox the item appears. It’s where you’d need to make changes if you wanted the edited item to appear in it’s current place when the user double clicks.
Hi Hillel,
I tried using setChildIndex() for the edited item. Unfortunately when double-clicking the tiem to be edited still appears last in the list.
Is there a specific way to control the textInput positioning so that it remains at its current position?
Hi again,
Actually I managed to double-click and display the item at its current position…in the double-click handler I added flowBox.addElementAt(textInput,index);
POSITION = index;
However the first time I double-click an item and modify it, the changes are picked correctly. When I double-click the same item again..it gets me another item in the box. There seems to be a index synchronisation issue. Anything you think that might cause this error?
Thx
Off-hand I’m not sure… I’d check (ie, using trace statements or the debugger) that the addItem function isn’t getting called an extra time as that’s the only place that items get added to the FlowBox.
Hello Hillel,
I have tried tracing but with little chance in finding the bug. If you could have a look.
I added the following event Listener in init():
addEventListener( MouseEvent.DOUBLE_CLICK, handleDoubleClick );
My double-click handler is as follows:
private function handleDoubleClick( event:MouseEvent ):void
{
var target:iComboItem = determineFocus();
var index:int = flowBox.getChildIndex( target as DisplayObject );
var item:Object;
if (_allowEditingSelectedValues && ((_selectedItems.length – index) >= 1) )
{
item = _selectedItems.getItemAt( index );
_selectedItems.removeItemAt( index );
dispatchEvent( new Event( Event.CHANGE ) );
var label:String = labelFunction( item );
searchText = label.substr( 0, label.length ); // -1
flowBox.addElementAt(textInput,index);
POSITION = index;
trace(“MyIndex&Item: ” + index + ” : ” + item); //Selected Item should be in sync with target
trace(“TargetItem: ” + target.item); //target.item is OK !!
textInput.setFocus();
textInput.setTextSelected(false);
}
isDoubleClicked = true;
}
And I also modified the addItem() method as follows. I added the IfElse statement at the end to know whether the user has double-clicked.
public function addItem( item:Object ):void
{
if (!_showSelectedItems)
{
return;
}
if (flowBox.numChildren == 2 && !_allowMultipleSelection)
{
selectedItems.removeItemAt( 0 );
}
var isNew:Boolean = item is String && (!_dataProvider || _dataProvider.getItemIndex( item ) == -1);
if (isNew)
{
item = StringUtils.trimCommas( item as String );
}
if (item)
{
if (isNew && _allowEditingNewValues)
{
var editableItem:EditableItem = new EditableItem();
editableItem.allowMultipleSelection = _allowMultipleSelection;
editableItem.text = item + (_allowMultipleSelection ? _delimiter : “”);
editableItem.width = measureText( item as String ).width + 10;
editableItem.height = textInput.height;
editableItem.item = item;
editableItem.addEventListener( Event.CHANGE, handleEditableItemChange, false, 0, true );
flowBox.addChildAt( editableItem, flowBox.numChildren – 1 );
}
else
{
var selectedItem:SelectedItem = new SelectedItem();
selectedItem.text = _labelFunction( item );
selectedItem.item = item;
selectedItem.height = textInput.height;
selectedItem.allowMultipleSelection = _allowMultipleSelection;
selectedItem.showRemoveIcon = _showRemoveIcon;
selectedItem.addEventListener( SelectedItem.REMOVE_ITEM, handleItemRemove, false, 0, true );
selectedItem.addEventListener( TextEvent.TEXT_INPUT, handleItemTextInput );
textInput.textInput.height = 20;
textInput.height = 22;
textInput.width = 200;
//flowBox.addChildAt( selectedItem, flowBox.numChildren – 1);
trace(“Posi: ” + POSITION + ” selectedItem: ” + selectedItem.item)
if (isDoubleClicked == true){
flowBox.addChildAt(selectedItem, POSITION);
flowBox.removeElement(textInput);
}
else{
flowBox.addChildAt( selectedItem, flowBox.numChildren – 1);
}
}
}
textInput.enablePrompt = flowBox.numChildren == 1;
}
Hope I have been clear enough in the codes above. Am failing to understand where it is losing the index. Pls help me out.
Thanks.
It looks like you’re adding an element to the FlowBox in both of your functions.
Hi
This is really awesome. However, as I am a newbie to flex, i got a small doubt.
Can you please tell me how to access the typed in text from the component?
i.e: If user types “How are you” in the component, how can i get the text upon a button click?
I failed by using, component_id.searchText, component_id.text etc..etc.. please help me out.
Thank you.
aditya,
The searchText property should be what you’re looking for, I’m not sure why it isn’t working for you. If you could send me an example application showing your problem I’d be happy to help debug it.
Hi,
I’m running into an issue and was hoping you could help me out.
I’ve got several autocomplete items listed. each has a default value when the page loads. If i click on the first one (and either change it or leave it alone), and then hit tab, the focus goes to the next item, but leaves the previous one empty.
Also, this same thing happens if i simply click on one box, and then another… it doesn’t have to be the tab key that is used to change focus.
any help would be greatly appreciated.
Also, I’ve left a comment before about having the textAlign feature work… you wrote back and said to look through the flowbox file. I’ve done this, but wasn’t able to find a solution – can you provide any more assistance?
If you could put together a sample application which demonstrates your issue I’d be happy to help debug it.
The updateDisplayList function in the FlowBox classes uses as algorithm to layout its children one after another. You’d want to modify the code so the child element (in your cases there will only be one) is positioned in the center of the component.
Ive set up a small example of what i’m talking about. You can view it here: http://xubees.com/hillelASDemo/
Once the page loads and you put your cursor is in a box, if you hit tab or click in another… the content from the box that previously had focus becomes empty… this only happens until an item from the dropdown list is selected (i.e. the content of a box is what is set in the “text=”” command of the AutoComplete component.
I’ve enabled view source, and hope to hear from you soon!
Thanks again,
Alex
Alex,
Thank you for putting together the application, it was very helpful.
The ‘text’ property probably isn’t what you want to use here. If your intention is to have an item selected when the page loads then you’ll want to set the ‘selectedItem’ property. If the purpose is to display text to the user (ie, select country) then you’d want to use the ‘prompt’ property.
I am getting data provider from database. As user types character..After three character I start searching database to get all user’s list. Below is the code snippet
public function dropDownLabelFunction( item:Object ):String
{
var string:String = item.lastname+ ” ” + item.firstname + “<” + item.email + “>”;
var searchStr:String = users.searchText;
var returnStr:String = StringUtils.highlightMatch( string, searchStr );
if (users.selectedItems.getItemIndex( item ) >= 0)
{
returnStr = “” + returnStr + “”;
}
return returnStr;
}
The problem is it hit the database and in the log I can see the list retrieved however, I dont’ seee dropDownLabelFunction being invoked here. CAn you pls suggest what I am missing here.
The MXML didn’t come through. To get it to work in wordpress you have to replace < with & lt;, or you can just email it to me.
No Worries. I found it. I just needed to inovke showDropDown function. Thanks for this great component.
First of all, this is a great tool that you have created! Just wanted to tell you that before I ask my question; Is there a way to remove the bubble that comes around the text when you focus out of the cell?
As soon as I posted this I figured it out. No need to respond to that question. But one thing I did want to know, and you touched on this a little in the previous posts, is there a way for me to set ‘selectedItem’ to something that isn’t in the list? Even with ‘allowNewValues = “true”‘ it won’t allow me to set ‘selectedItem’ to something that isn’t in the current list.
I’m sorry, I’m not able to replicate your issue. If you want to put to together a sample application demonstrating the issue I’d be happy to help you debug it.
You may want to try adding the new item to the dataProvider first.
Hi,
I am running into an issue that I have not been able to figure out. My implementation allows new items to be added to the AutoComplete component. However, I have not been able to work around the fact that as soon as the filter finds a match, it gets highlighted in the drop down. So if the user hits enter, the search string is not selected. Instead, the match in the drop down menu is selected. For example, my data provider has only one item “building1”. If I want to add a new item “building”, when pressing enter “building1” is selected!
I would appreciate your help on this.
Try setting autoSelectEnabled to false
The autoSelectEnabled property is set to false. I have noticed that having this property set to false, prevents the component from selecting automatically an exact match from the drop down. However, it doesn’t prevent the component from highlighting the first match in the drop down. So when the user hits “enter”, the search string is replaced by the highlighted item in the dropdown.
AutoComplete id=”autoComplete”
width=”100%”
matchType=”anyPart”
allowNewValues=”true”
selectedItemStyleName=”{AutoComplete.STYLE_FACEBOOK}”
backspaceAction=”remove”
allowDuplicates=”false”
allowMultipleSelection=”true”
enableClearIcon=”true”
showRemoveIcon=”true”
dropDownRowCount=”10″
clearSearchOnFocusOut=”true”
autoSelectEnabled=”false”
I’m sorry, there’s no easy way to prevent the component from highlighting the first match.
Is there a way to change the background color of the text field? I need to make the background color grey if a variable is true, and white if the variable is true. I tried doing backgroundColor=”#e5e5e5″ but the background still came up white.