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…”

  3. Hi,
    Thank you for this component.
    I am using it in an AIR project. Your component saved a lot of time and effort and made user forms easier to use.

    One thing is that neither the component nor its sub-parts viz, combo or prompttextinput implements the ifocusmanager to enable the customised setting of focus to the component.

    To get around this i added the implements keyword to the prompttextinput.

    Otherwise a very useful component.

    Reply

  5. stationcharlie,

    That’s a good idea, thanks for the suggestion. I’ll be sure to implement it in the next version.

    Andrés,

    Thanks’s for the support, it’s very much appreciated.

    Best
    Hillel

    Reply
  6. Pingback: Composant Flex

  7. What would be the best way to allow a new item to be entered when using the list builder?

    Thanks. Great component!

    Reply

  8. Hi

    a little example of ‘filterFunction’ in use, will be great or atleast the signature of the callback method…

    Thanks

    Reply

  9. skassam,

    If you’re aren’t using the multiselect mode you can simply use the text property of the component. Otherwise we’d need to create an “Add’ button which would create a new item and add it to the dataprovider. If you’re up to the challenge I’d be happy to walk you through it and then incorporate your changes into the component.

    Reply

  10. Alan,

    Sorry there isn’t too much documentation, I’m working to improve it. Here’s an example of how the filterFunction would be used.

    private function init():void
    {
    chooser.filterFunction = filterItems;
    }

    private function filterItems( item:Object, searchStr:String ):Boolean
    {
    // check item
    }

    Reply

  11. Thanks Hillel.

    Here is my final implementation. thot it would help others.

    private function creationComplete():void
    {
    chooser.filterFunction = filterFunc;
    chooser.dropDownLabelFunction = dropDownLabelFunc;
    }

    private function filterFunc(item:Object, searchString:String):Boolean
    {
    var regExp:RegExp = new RegExp(searchString, “i”);
    if(regExp.test(item.name))
    return true;

    return false;
    }

    private function dropDownLabelFunc(item:Object):String
    {
    return (item.name as String).replace(new RegExp(chooser.text, “gi”), “” + chooser.text + ““);
    }

    Reply

  12. Thanks Hillel. Disabling multiselect worked like a charm. If I wanted to use multiselect, how to I get the list of items in there?

    Reply

  13. Now that I am thinking about it, I think that would be a cool feature to have. If you are willing I’ll take you up on your offer for help. Thanks. Let me know what I need to do.

    Reply

  14. my attempts in styling the component are going futile. perhaps, i’m doing it wrong.

    what would be the names of the CSS classes that i should override?

    Reply

  15. short answer:

    add this class in your application css to decorate this component

    PromptTextInput
    {
    backgroundColor: #222222;
    color: #ffffff;
    }

    Reply

  16. improved dropDownLabelFunction(….)

    private function dropDownLabelFunc(item:Object):String
    {
    var label:String = item.name as String;
    var decoratedLabel:String = “”;

    var start:int = label.search(new RegExp(chooser.text, “gi”));
    decoratedLabel = label.substring(0, start);
    decoratedLabel = decoratedLabel + “” + label.substr(start, chooser.text.length) + ““;
    decoratedLabel = decoratedLabel + label.substr(start + chooser.text.length, label.length);

    return decoratedLabel;
    }

    Reply

  17. Alan, you rock!!

    Thank you so much, I’ll be sure to incorporate your change into the next release. For this to work, we’re going to want to make the filter function search the middle of the string.

    ie, ‘th’ would match ‘The Beatles’ and ‘Megadeth’

    Maybe we should offer a flag which enables/disables this feature

    Reply

  18. if you ever want to preset a value in the chooser, do this in creationComplete…

    private function creationComplete():void
    {
    chooser.combo.chosenItem = [your object];
    // [your object] must be one of the items in provided dataProvider collection
    }

    Reply

  19. Hi,

    Awsome work. When will the next version be available? I would like to search using the terms in between a text as well. In short, as you had mentioned, I want to show up the “The Beatles” as well as the “Megadeath” when a User searches “th”. I can see an improved function from Alan but I don’t know how to use this. What is the item:Object Parameter being passed into it?

    Reply

  20. Hey Rahul,

    I hope to have the next version up by the end of the month.

    To use Alan’s code you’d need to set set the id value of your chooser component to “chooser” and then call the creationComplete function when the component is first created (this function is in his earlier post on Dec 2nd).

    The item:Object parameter is the item in the dataProvider which is currently being compared to the search or display function;

    Hope this helps.
    Hillel

    Reply

  21. Excellent component and thanks for sharing this.. Let me know, when you release the next version with the above changes..

    this will definitely save us weeks of development time and will improve the usability drastically
    thanks
    .iqlas

    Reply

    1. Thanks! I’m hoping to release the next version by the end of the month.

      There currently isn’t a setting for the dropdown width but If you use the source code you can change it manually. There’s a function showDropDown in Combo.mxml which sets the width of the dropdown to match the width of the TextInput, you can simply change the value there.

      Best,
      Hillel

      Reply

  24. Hillel, this is a really fantastic component, I’ve been looking around for a few days at several auto-complete components and this is pretty much exactly what I’ve been looking for. I do have a big question for you, and I’m hoping you can point me in the right direction with it through your component. Your component works great if I am trying to auto-complete a single term, but what I’m interested in doing is building something that attempts to auto-complete multiple terms in a text field.
    Taking your Crayola example file, if I was to start trying to type one crayon name, have it complete it, and then I put a space and then started trying to write another crayon name, I’d like the AutoComplete component to try and complete that second, third, fourth terms and so on.
    The reason is because I’m trying to do a proposal for a school project for a “linguistic search tool” that would allow people to use natural language to search – so that they could type in “search this”. To lower the barrier of accessibility, if my search tool could auto-complete the functions involved, it would make it easier on the end user. For example, they could write “se” and search would pop up, then “t” and “this” would pop up in their list.
    I apologize for this insanely long post, but I’d appreciate any help you could provide me. Thanks!

    Kunal

    Reply

    1. First off… thank you so much 🙂

      Ok, on to your question. That feature is actually on my to do list. I’d like to include it in the next release but I don’t want to make any promises. When’s your proposal due?

      If you’re interested in trying to implement it yourself I’d be happy to help you out.

      Reply

  25. Thanks for the fast response Hillel. My proposal is due next Monday…for this Monday I’m going to build a mockup in AS3 that (hopefully) accomplishes the multi-term autocomplete using the Astra Developers AutoComplete class. I haven’t had a chance to pore over your code yet, but as soon as I do I’m sure I’ll have lots of questions…I’ve been studying AS3 for a few months but I haven’t worked much at all with Flex, so finding an Actionscript-based solution through your work is ideally where I will try and take it. I’ll shoot you an email with questions if you don’t mind, just let me know what email address you’d prefer. My email is kunal.d.patel at gmail. Thanks!

    Reply

  26. Thanks for the excellent component!

    I am using it to display a list of addresses, and go off to the database to get a filtered list of values once the user has typed in three letters (to keep the list size small).

    My problem is that when the user enters some new letters, and the dataProvider model is updated, the dropdown list does not reflect the new list, but displays the old list. When I type all the letters of a legitimate value in the new list, it gets properly identified and underlined, but it is confusing to say the least that the dropdown is not synchronised.

    Is there a way of forcing the component to ‘refresh itself’ from the changed dataProvider model?

    Should I be approaching this a different way?

    Would you recommend diving into the source and making modifications myself? If so, any pointers would be appreciated.

    Reply

    1. Thanks for the feedback. I think I see the problem, in combo.mxml we set the dataProvider for the dropdown the first time it’s created but we don’t update it if the dataProvider is changed. I’ll fix this in the next version. If you’d like to make the change yourself to the sourcode here’s a quick fix. Add this to the “set dataProvider” function in combo.mxml

      if (_dropDown) _dropDown.dataProvider = value;

      Best,
      Hillel

      Reply

  28. Thanks Hillel,

    I’ve been having a similar problem to Adam – thanks very much for your quick fix!

    Great component by the way!

    Regards,

    Rob

    Reply

  29. Thank you very much for posting the source to this component. Works flawlessly. The autocomplete one from the flex team has a lot less freedom and it’s not by far bug free.

    Reply

    1. asabua,

      Thanks, that’s really nice to hear. I was bit afraid that releasing it into the wild would uncover a ton of bugs that my own use of the component hasn’t turned up. Knowing it’s working for other people definitely helps me sleep better at night 😉

      Best,
      Hillel

      Reply
  30. Pingback: Flex: Enhanced search ComboBox at Stefan B.log

  31. Good work! and thanks for sharing.

    For my application the dataProvider does not have an exhaustive list of valid inputs. The user is allowed to enter a text which is not in the dataProvider.
    Problem: if the beginning of the new text exactly matches an item in the dataProvider, an automatic selection happens before the user finishes typing.

    Is there a way to disable auto select ? I tried to use an ‘isEqualFunction’ that always returns false, but still the auto select happens.

    Reply

    1. You’re absolutely right, you should be able to create a dummy isEqualFunction to disable the feature but it doesn’t work. I’m actually just wrapping up the next version (hope to release it tomorrow) and I’ll be sure to include a fix for this.

      Thanks for catching this,
      Hillel

      Reply

  32. I did testing for the case when labelField can not be used (i.e. dataProvider is made of objects whose fields can only be accessed through functions). I used labelFunction and labelDropDownFunction.
    There seems to be a problem with the browser. It does not display the list of items properly, because it does not seem to call labelFunction.

    I am sending you a testcase by mail.

    Reply
  33. Pingback: Flex AutoComplete: Latest version « Hillel Coren

  34. Hi,

    Great component, using it in a project, had to modify it however, added ability to set the errorString property, so it can be used in the course of validation. Want me to pass u back what I did?

    Thanks,

    Dimitrios

    Reply

    1. Dimitrios,

      Your changes would be very much appreciated. If it’s a small change you can post it here, otherwise please email it to me. My email address is on the contact page.

      Thanks very much,
      Hillel

      Reply

  35. Hello sir,

    I have used the autocomplete in my application and its working great on my window system..But i want to ask will it run on Linux system or is there different coding for linux system?I am new to Flex..so please help…

    thanks again for such a great component…

    Reply

    1. Vinit

      Thanks for your feedback. I haven’t used it on Linux myself but the beauty of Flex is that it shouldn’t matter as it’s platform independent. If you do run into any issues let me know and I’ll try to help you figure it out.

      Best,
      Hillel

      Reply

  36. Hi,

    great Component, but i have the following problem:

    I use the Chooser to cache entries (ArrayCollection) in a search-form.
    If the user searches e.g.:
    “BL” maybe he gets 1000 Results. If he now tries to search for “BLA” to refine his search the components behaviour is:
    “BL” is perfect match -> String is selected in TextInput and the next key-stroke on “A” overwrites the “BL”. Is there any possibility to avoid this behaviour?

    Andreas

    Reply

    1. Andreas,

      A bunch of people have run into this issue, I’m going to change the behavior in the next release. For now you can create an isEqual function which always returns false to disable it.

      Let me know if you have any trouble getting this working,
      Hillel

      Reply

  37. Hi,
    I was looking at the problem mentioned right above by Andreas. I think I’ve fixed it for the single selection case only by editting the Combo.mxml handleChangeOnceSelected() function. I changed it to simply have four lines:
    var newSearchStr:String = promptTextInput.text;
    setSelectedItem( null );
    promptTextInput.text = newSearchStr;
    promptTextInput.setTextSelected( false );

    Maybe this causes other problems, but it works for me.

    Also, I added a property for whether selected items are underlined.
    And I looked at changing the default comma separator (multi-selection only) but it wasn’t as straight forward as I hoped.

    Reply

  38. Hi,

    workaround works great, thanks. Is there any Example-Implementation of this component working with storing Data in a sharedObject (like in yahoo astra flex)?

    Andreas

    Reply

  39. HI hillel..
    i need a favor from u..

    i need an auto complete tool lik wat u have done with a slight modification.. it should also allow user to enter his own data..

    i mean just lik gmail mailto: field..

    if u have code plz send the following mail id.

    venkatesan.murali1985@gmail.com

    Reply

    1. Venkatesh,

      The component allows the user to enter their own value but only if multiSelect is disabled (it sounds like you need it to work for multiSelect mode though). This is something I’m working on in the next version but it may be a little while till I get it completed. I wouldn’t suggest you wait for me to implement it.

      Let me know if I’m not understanding your request clearly

      Thanks,
      Hillel

      Reply

  40. Hi Hillel

    Thanks for ur response..

    my requirement is just exactly like what we experience in gmail “mail
    to” field. It supports both auto complete and also user can type his own
    mail address. i need a flex component which supports both the
    requirements.
    Wil u be able to say when wil u be releasing ur next version so tht would
    be helpful for me..

    thnks in advance for ur response..

    Reply

    1. Venkatesh,

      The point that I need you to clarify is: do you need to allow the user to enter multiple values (if not you can make it work using the current version).

      Best case, I hope to have the next version done by April 1st (but it may very well take longer).

      Reply

  41. HI hillel..

    U r absolutely rite.. i need the user to enter multiple values as well as select the values from auto complete..

    Reply

  42. Hi Hillel,
    Awsome component here. I’ve been using it for an address input mechanism. (http://gis.greeleygov.com/origin/propinfo.html) It’s in the “Find Address Panel”.

    I have a dataprovider that has 30,000 entries which (understandably) causes typing in the textInput to be sluggish. Would it be possible (I’m new at Flex, that’s why I’m asking) to add a timer delay to the text input key strokes so that if the user types rapidly, the drop down doesn’t go through it’s search routine until a certain amount of time occurs between key strokes? That way a user could type quickly the text they want, then as they stop or even slow down, the drop down list then is fired and displays the results.

    Reply

    1. Royce,

      Wow, you’re site is amazing… it looks really cool. Great job!!

      One approach could be to create two flags: searchStrChanged and isSearching. When the user presses a key, set isSearching, reset searchStrChanged and then search. If the user presses another key before the search completes set searchStrChanged. Finally, when the search completes, if searchStrChanged is true search again. Timers introduce random slowness, this way your app is only as slow as it needs to be…

      Hope this helps,
      Hillel

      Reply

  44. Hi Hillel,

    I’m using your latest version, and I’m having problems with the data in my ArrayCollection dataProvider changing and the updates not being shown in the dropdown.

    Here is my code:
    var items:ArrayCollection = new ArrayCollection();
    chooser.dataProvider = items;
    // dynamically added later on
    items.addItem(“Another item”);
    items.refresh();
    // dropdown list doesn’t have my new item unless I do this:
    chooser.dataProvider = items;

    Looking at the code I’m guessing it’s because the dataProvider’s source Array is passed into the Combo, and so changes to the ArrayCollection that I pass in aren’t noticed.

    As a quick fix I did this, not sure if it is a good idea for everyone though (I don’t do any sorting/filtering):
    // Commented out these two lines inside Chooser.mxml commitProperties():
    //combo.dataProvider = new ArrayCollection(_dataProvider.source);
    //combo.dataProvider.sort = _dataProvider.sort;
    // Added this line instead:
    combo.dataProvider = _dataProvider;

    Thoughts?

    Reply

    1. Chris,

      The change you made is exactly right, I’m going to make this change in the next version of the component. You can see my comment to Adam in the “Almost there…” post which provides a bit more info about it.

      Sorry for any trouble this caused you,
      Hillel

      Reply
  46. Pingback: Flex AutoComplete: Almost there… « Hillel Coren

  47. Hi hillel..
    i need a favor from u..
    I am new in the flex world and I have asked to develop a component like you have developed.
    I have downloaded your but I am not able to execute your code.
    Could you please tell me how to execute your code.
    Please help.

    Regards
    Manna

    Reply

    1. Manna,

      I’m happy to help you. I’d suggest looking at the demo application (the source is in the examples folder). 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>
		<!&#91;CDATA&#91;
			import mx.collections.ArrayCollection;
			
			&#91;Bindable&#93;
			public var items:ArrayCollection = new ArrayCollection( &#91;"one","two","three"&#93; ); 
			
		&#93;&#93;>
	</mx:Script>
	
	<components:AutoComplete dataProvider="{ items }"/>
	
</mx:Application>
      Reply

  48. Hi hillel..
    Thanks a lot.I am able to execute your code and it is awesome and I just need one more favor from u..
    Actually I have to create a similar component like what you have developed with some one more extra feature.
    In the component there will be one more option “Create new entry”.If user did n’t find his require data,he can create a new entry and after that he can search the data.
    Could you please give me some hint or some code so that I can modify the code according to the requirement.

    I look forward to get your response soon.

    Please help.

    Best Regards,
    Manna

    Reply

    1. Manna,

      You’ve got two options:

      The easiest solution is to simply set the “allowNewValues” property to true. This will allow the user to add new items to the dataProvider inline in the component. You can optionally set the allowDuplicates and allowEditingNewValues properties to further refine how it functions. This can all be seen in the demo.

      The more advanced approach would be to use the actionsMenu. Here’s the framework code for this approach (you’ll need to create the PopUp which would allow the user to add a value).

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:components="com.hillelcoren.components.*">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.managers.PopUpManager;
			import mx.collections.ArrayCollection;
			import mx.containers.TitleWindow;
			
			&#91;Bindable&#93;
			public var items:ArrayCollection = new ArrayCollection( &#91;"one","two","three"&#93; ); 
			
			private function handleItemClick():void
			{
				var popUp:TitleWindow = new TitleWindow();
				popUp.title = "Add Item";
				popUp.width = 100;
				popUp.height = 100;
				
				PopUpManager.addPopUp( popUp, this, true );
				PopUpManager.centerPopUp( popUp );
			}
			
		&#93;&#93;>
	</mx:Script>
	
	<components:AdvancedAutoComplete id="autoComplete" actionsMenuDataProvider="{ menuData }"
		dataProvider="{ items }" itemClick="handleItemClick()"/>

    <mx:XML format="e4x" id="menuData">
		<root>
			<menuitem label="Create new..."/>			
		</root>
	</mx:XML>
	
</mx:Application>

      Hope this helps,
      Hillel

      Reply

  49. Hi Hillel,

    Thanks a lot for your help.I have one more question.
    Suppose I have two field in the arrayCollection one is “code” another is “Name”.
    Now user can search using “Code” or “Name”.But after completion of search the search field will be always bind by “Name”.
    I am able to search the record irrecpective search type “code/Name”.But I am not able to bind the field with “name”.I have modified the code like below way:

    private function labelFunction( item:Object ):String
    {
    var searchStr:String = autocomplete.searchText;
    var stringCode:String = item.Code;
    var returnCodeStr:String=””;
    if(stringCode.indexOf(searchStr)>=0)
    return item[“Code”];
    else
    return item[“Name”];

    }

    public function dropDownLabelFunction(item:Object ):String
    {
    var strName:String = item.Name;
    var searchStr:String = autocomplete.searchText;
    var stringCode:String = item.Code;
    var returnCodeStr:String=””;
    var returnStr:String=””;
    if(strName.indexOf(searchStr)>=0)
    returnStr =StringUtils.highlighMatch( strName, searchStr, AutoComplete.MATCH_ANY_PART );
    if(stringCode.indexOf(searchStr)>=0)
    returnCodeStr= StringUtils.highlighMatch( stringCode, searchStr, AutoComplete.MATCH_ANY_PART);

    if (autocomplete.selectedItems.getItemIndex( item ) >= 0)
    {
    returnStr = “” + returnStr + “”;
    if(returnCodeStr.length>0)
    returnCodeStr= “” + returnCodeStr + “”;
    }

    if(strName.indexOf(searchStr)>=0 && stringCode.indexOf(searchStr)>=0)
    return returnStr+” “+returnCodeStr;
    if(strName.indexOf(searchStr)>=0 && !stringCode.indexOf(searchStr)>=0)
    return returnStr+” “+stringCode;
    if(!strName.indexOf(searchStr)>=0 && stringCode.indexOf(searchStr)>=0)
    return strName+” “+returnCodeStr;
    else

    return strName+” “+stringCode;

    }

    Could you please suggest how we can bind the search result with “name” field.If possible please
    tell also how we can allign the “Name” field to left and “Code”-field to right in the dropdown box.

    As I am new in this world please give some hint to me.

    I look forward to get your response soon.

    Regards,
    Manna

    Reply

    1. Manna,

      I’m not sure I understand your question (what do you mean when you say “bind the search result with the name field”). But… here two things which may help:

      – You’re probably also going to need to set a function for the filterFunction property
      – To get more control over the layout (ie, name field to left and code field to right) I’d suggest using an itemRenderer for the dropDown. You can see an example of this in the color chooser demo (the item renderer file is ColorItemRenderer.mxml in the examples folder of the zip).

      Hope this helps

      Reply

  50. Hillel,

    Could you shed some light on how you did the “facebook” itemRenderer in the autocomplete component? I am referring to the background of the text in the textFiled when one chooses “facebook” for the style option.

    I asked this question on the Flex forum below, but it seems the best bet is to ask you, since you did it brilliantly in your component.

    http://forums.adobe.com/thread/434158

    Thanks.

    Reply

    1. John,

      Here’s a brief rundown of how I implemented the solution.

      – Each item (in your case word) is a Button. I’ve used skins to give them the “Facebook” look. The code for the skin is in the defaults.css file.
      – To get the delete icon to work I created a custom class called IconButton which disptaches two click events. A regular one if the button is clicked, and a “removeClick” event if the icon is clicked.
      – To layout the Buttons, I’ve create a FlowBox container using an algorithm written by Eric Cancil (http://blog.appdivision.com/2009/02/18/flex-flowcontainer/)

      It’s definitely possible to strip out these parts from the AutoComplete component to accomplish you goal, but I’m guessing it’s going to be somewhat challenging.

      I’m happy to help if you get stuck

      Best,
      Hillel

      Reply

Leave a reply to skassam Cancel reply