Flex AutoComplete Component: a new take on an old standard…

While there are a couple of other AutoComplete components out there (most notably the ones from the Flex Team and kuwamoto.org), neither of them had the features we were looking for. I struggled for a while trying to extend them but it just wasn’t working.

One of the main features we needed was for the component to show the part of the string which matches the search term. We also needed it to support selecting multiple items as well as creating an ordered list.

Latest version

As you can see in the demo, there are four main boolean properties which control how the chooser works:

isBrowseable: This will display a ‘Browse’ button to the right of the TextInput. If the user clicks it they will be presented with either a searchable DataGrid or a list builder (see below).
isMultiSelect: This enables selecting multiple values.
isOrderable: This makes the items in the list orderable. It provides buttons to reorder them as well as enabling drag-and-drop.
useListBuilder: If this is set to true, when clicking the browse button the user gets a List Builder rather than the DataGrid (note: this requires isBrowseable and isMultiSelect to be true).

Here are the other main properties:

labelField: Which property of the data objects to use when displayed in the TextInput and the Lists.
labelFunction: In place of the labelField you can specify a function for determining the string to display.
dropDownLabelFunction: A reference to the function used to display the matched items in the dropdown. It supports using HTML (which can be used to highlight the part of the string which matches the search pattern).
prompt: The message which is initially displayed in the TextInput.
filterFunciton: A reference to the function used to search when entering text into the TextInput. The function is passed the object being checked along with the search string
isEqualFunction: A reference to a function which can be used to determine if the search string should be considered equal to the object (if it returns true it will automatically select the item).

The bare minimum required to use the component is to set the dataProvider property to an ArrayCollection of objects and specify a value for labelField.

The code for the demo is pretty straight forward.

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

	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.collections.ArrayCollection;

			&#91;Bindable&#93;
			public var colors:ArrayCollection;

			private function init():void
			{
				colors = new ArrayCollection(
				&#91;
					{ "name":"Almond", "hex":"#C5E17A" },

					...

					{ "name":"Yellow Orange", "hex":"#FFAE42" }
				&#93; );
			}			

			private function handleChange():void
			{
				var color:Object = chooser.chosenItem;

				if (color != null)
				{
					setStyle( "backgroundColor", color.hex );
				}
			}
		&#93;&#93;>
	</mx:Script>

	<mx:Panel width="100%" height="100%" title="Chooser Demo"
			paddingBottom="20" paddingTop="20" paddingLeft="20" paddingRight="20">
		<mx:HBox>		

			<mx:VBox horizontalAlign="left">
				<mx:CheckBox id="browesable" label="Browesable"/>
				<mx:CheckBox id="multiselect" label="Multiselect"/>
				<mx:CheckBox id="orderable" label="Orderable" enabled="{ multiselect.selected }"/>
				<mx:CheckBox id="listBuilder" label="List Builder" enabled="{ multiselect.selected }"/>
			</mx:VBox>		

			<hc:Chooser id="chooser" dataProvider="{ colors }" labelField="name"
				prompt="Choose your favorite Crayola crayon" width="300" change="handleChange()"
				isBrowseable="{ browesable.selected }" isMultiSelect="{ multiselect.selected }"
				isOrderable="{ orderable.selected }" useListBuilder="{ listBuilder.selected }"/>					

		</mx:HBox>
	</mx:Panel>
</mx:Application>

I consider this to be a version 0.9. It seems to work pretty well but I’m sure there’s a bug or two hiding in there. There are also a couple of more features I’d like to implement.

There’s no copyright… please use the code freely. I just ask that if you come up with any improvements you email them back to me.

Hope you find this component useful,
Hillel

95 thoughts on “Flex AutoComplete Component: a new take on an old standard…”

Taqi Ahmed Taha says:

May 28, 2009 at 3:27 pm

This helped me a lot.
Thank you

Reply
1. Hillel says:
  
  May 28, 2009 at 4:58 pm
  
  Taqi,
  
  Glad to hear it, let me know if you run into any issues I can help with.
  
  Best,
  Hillel
  
  Reply
Pete says:

May 31, 2009 at 10:20 pm

This has been extremely useful to me too.

One thing I haven’t worked out yet is how to get the datagrid in the browse feature to *not* sort alphabetically (I want a column named “code” to display before one called “address”, for example).

Thank you

Reply
1. Hillel says:
  
  May 31, 2009 at 10:31 pm
  
  Pete,
  
  You can apply a sort to the dataProvider which should sort it in the datagrid. The only catch is the sort will also be applied in the search results in the dropDown.
  
  Hope this helps,
  Hillel
  
  Reply
Daniel says:

June 23, 2009 at 9:52 pm

Hi!
Your component is just incredible! I love it! I use it in my applications and it works really good! Just one thing. When drop down is opened and the AutoComplete is in a scrollable parent container, the drop down position moves with th scroll position. It doesn’t stay fixed. Weird behavior! Thanks for all!

Reply
1. Hillel says:
  
  June 25, 2009 at 4:17 am
  
  Daniel,
  
  I think the real problem here is that when you click outside the component (ie, to scroll) the dropDown needs to be hidden. I was using the hitTestPoint function to check if the user clicked outside the dropDown but it looks like it doesn’t work if you click just below the list. I’ve changed the code to fix this and have checked it in to the google code site.
  
  Let me know if this resolves your issue.
  
  Thanks,
  Hillel
  
  Reply
Daniel says:

June 25, 2009 at 4:14 pm

Hi Hillel!
Thanks for the reply! I just forgot to mention that I was using the mouse wheel to scroll. I tried to put a MouseEvent that manage the wheel, but looks like it is never fired. It is a minor bug! Thanks for your awesome work!

Reply
Jon says:

July 15, 2009 at 10:30 pm

Hi Hillel,

Great component, thanks.

Is there any chance that this can be converted/extended into a autocomplete combobox instead of an auto-complete textinput? Something like http://www.flextras.com/?event=ProductHome&productID=10
or http://blog.sbistram.de/2008/12/26/flex-a-combobox-with-searching-and-filtering/

Thanks again for the all the work.

Reply
1. Hillel says:
  
  July 15, 2009 at 10:36 pm
  
  Jon,
  
  Give this a try and let me know how it works for you…
  
  http://hillelcoren.com/2009/07/03/flex-autocomplete-version-1-0/#comment-1020
  
  Reply
Pingback: AutoComplete « Mjcprasad’s Blog
Jim says:

September 30, 2009 at 6:31 am

i’m new to flex starting with flex 3 for 1 month. is there a very simple way to do this autocomplete stuff or anything in flex i.e. just insert an object from the tool bar and functions just work. is flex called open source because everyone is figuring out to do something and passing it on to everyone else.

Reply
1. Hillel says:
  
  September 30, 2009 at 9:08 am
  
  Jim,
  
  That’s a difficult question to answer. Although Flex is designed to be quick to get up and running it’s generally not the case that you can drop something in and it’ll just work. I’ve found the Flex community to be extremely helpful when trying to figure things out. If you have questions the best place to post them is the Flex forum.
  
  Reply
EW says:

November 25, 2009 at 3:46 pm

Hi Hillel, Great component.

For my project, i need to have rounded edges of the text box. If i select corner radius = 9, i can only see the focus as rounded.

I applied following style:
AutoComplete{
borderStyle: solid;
borderColor: #777777;
borderThickness: 1;
cornerRadius: 6;
backgroundAlpha: 1;
}

But this gave me rounded edge imposed on square edge.. This styling fixes rounded edges of textinput but is however not working for AutoComplete.

PLease Help ASAP.

Thanks.

Reply
1. Hillel says:
  
  November 26, 2009 at 7:37 am
  
  EW,
  
  I’ve tried to do this as well but haven’t yet been able to get it to work. Sorry I can’t be more help.
  
  Reply
martin says:

November 25, 2009 at 5:25 pm

Hi Hillel
First of all thanks for sharing your wonderful component with us…
and excuse me for bothering you with beginner questions.
I’d like to extend the disable duplicates functionality like this:

imagine we have following array in the ColorDemo:

colors = new ArrayCollection(
[
{ “name”:”aaa”, “hex”:”groupOne” },
{ “name”:”bbb”, “hex”:”groupOne” },
{ “name”:”ccc”, “hex”:”groupOne ” },
{ “name”:”ddd”, “hex”:”groupTwo” },
{ “name”:”eee”, “hex”:”groupTwo” },
{ “name”:”fff”, “hex”:”groupTwo ” },

] );

Supposed I clicked an entry of groupOne
How can I disable the rest of groupOne

I found the following function in autocomplete.mxml:

private function checkIfDuplicate( searchFor:Object ):Boolean
{
if (_allowDuplicates)
{
return false;
}

var count:int;

for each (var item:Object in _selectedItems)
{
if (item == searchFor)
{
count++;
}
}

if (count > 1)
{
silentlyRemove( item );
return true;
}

return false;
}

How can i achieve that the hex field of the array is checked for duplictes instead the of the name field?
or even better both of them?
Thanks in advance…
Martin

Reply
1. Hillel says:
  
  November 26, 2009 at 7:39 am
  
  Martin,
  
  The checkIfDuplicate function should really be protected. You’re going to need to use the source and modify the logic in the function to “if (item.hex == searchFor.hex)”
  
  Reply
  1. martin says:
    
    November 26, 2009 at 11:13 am
    
    thanks for the quick reply… works like a charm.
Bo says:

December 27, 2009 at 12:34 am

Hi Hillel,

Can we set the separator that triggers the auto-completion search? For example, after I typed in a new value, I have to input a comma in order to start another search. How can I use space instead of comma? The reason I am asking is I would like to use auto-complete to allow user to input an expression. The extra commas would confuse the expression.

Thanks for your time

-Bo

Reply
1. Hillel says:
  
  December 27, 2009 at 11:31 am
  
  Bo,
  
  I plan to add the ability to set the value to use as the separator in the next version. For now, this comment explains a workaround using the source.
  
  http://hillelcoren.com/2009/05/11/flex-autocomplete-version-0-98-2/#comment-940
  
  Best,
  Hillel
  
  Reply
MArtin says:

January 4, 2010 at 2:32 pm

Hi Hillel
All the best for 2010…
Currently I am develloping an application where i use
your color_demo and your email_demo.
to move the values I collected via your autocomplete component
to my database I first of all have to sort them to an array and splice them to the
position that maches the database table’s fields.

colors = new ArrayCollection(
[
{ “name”:”wert1″, “hex”:”1″, “nr”:”10″, “val”:”1″ },
{ “name”:”wert2″, “hex”:”1″ , “nr”:”10″, “val”:”2″},
..etc

I simply recycled your function for changing the bg color,
to splice the contents of the autocomplete box to an array (to transmit it to a database later)

private function handleAutoCompleteChange():void
{
var color:Object = autoComplete.selectedItem;

if (color != null && color.hasOwnProperty( “hex” ))
{
//Application.application.setStyle( “backgroundColor”, color.hex );

Application.application.antworten.splice(color.nr, 0, color.val);
trace(Application.application.antworten);
}
}

this works.

But how could I achieve to do the same when something is removed via backspace?
I mean, replacing the Value in my Array at Position “color.nr” with a default value..

Sorry for asking beginner Questions

thanks
Martin

Reply
jyoti says:

March 2, 2010 at 7:19 am

Hello Hillel
very helpful component u have created.
But I am new in flex field and still I am having some problem with it.In textInput box a grayBOx is coming inside textInput box(or more clearly autocomplete box), I want the component to look exactly like textInpt after selecting an item and don’t want to have that gray box inside what I can do for it? Please reply ASAP.

Reply
1. Hillel says:
  
  March 2, 2010 at 10:43 am
  
  jyoti,
  
  Are you using the sourcecode or the SWC?
  
  Reply
Lakhan says:

March 16, 2010 at 1:37 pm

I just want to know that weather your component is free to use or it require any Licence. Also I would require source code or SWC file if it is free to use. Please let me know from where we can download the same.

Thank in Advance.
Lakhan

Reply
1. Hillel says:
  
  March 16, 2010 at 1:40 pm
  
  Lakhan,
  
  In the future I may charge for it but for now it’s free.
  
  The best place to download the source/swc is http://hillelcoren.com/flex-autocomplete/
  
  Best,
  Hillel
  
  Reply
Felipe says:

November 5, 2010 at 2:30 pm

Hello
I’m from Brazil, use the Chooser component, but I have a difficulty using the property isBrowseable = “true”, like that when I could use this property to limit the columns in the DataGrid that opens, just put the ID and Description of the object. and I also have the difficulty to rename the column of the DataGrid headerText that opens on top, can you help me?

Felipe
Brazil

Reply
1. Hillel says:
  
  November 7, 2010 at 4:31 pm
  
  Felipe,
  
  To specify which properties to show in the dataGrid and set the headers you can use the following (note: make sure you’re using 1.1 version of the component).
  
  autoComplete.browserFields = [{field:”id”,label:”ID”}];
  
  Best,
  Hillel
  
  Reply
mike says:

April 5, 2011 at 4:03 am

this is indeed a great component ..
i was just wondering … is there a way to populate the “textinput” with data coming from a database? should i convert the lastResult into an Array Collection? im quite lost about this pls do help .. tnx .. ^^

Reply
1. Hillel says:
  
  April 5, 2011 at 3:10 pm
  
  mike,
  
  I’d start by checking out the DynamicData.mxml file in the examples folder of the zip. Let me know if you have any trouble getting it working.
  
  Reply
nicksun2007 says:

February 15, 2017 at 12:06 am

Reblogged this on 老树昏鸦.

Reply