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.
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>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var colors:ArrayCollection;
private function init():void
{
colors = new ArrayCollection(
[
{ "name":"Almond", "hex":"#C5E17A" },
...
{ "name":"Yellow Orange", "hex":"#FFAE42" }
] );
}
private function handleChange():void
{
var color:Object = chooser.chosenItem;
if (color != null)
{
setStyle( "backgroundColor", color.hex );
}
}
]]>
</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
November 19, 2008 at 3:00 pm |
Hi, great component !
just a question: how long did it take for you to develop it ?
thanks
November 19, 2008 at 3:07 pm |
Thanks, happy you like it
I’d estimate that this took me about a month to create.
November 23, 2008 at 6:33 am |
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.
November 23, 2008 at 8:55 pm |
Great work!!!
Congrats from Chile
November 24, 2008 at 9:07 am |
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
November 26, 2008 at 3:57 pm |
[...] En savoir plus sur le Composant Flex AutoComplete [...]
December 2, 2008 at 7:00 pm |
What would be the best way to allow a new item to be entered when using the list builder?
Thanks. Great component!
December 2, 2008 at 7:16 pm |
Hi
a little example of ‘filterFunction’ in use, will be great or atleast the signature of the callback method…
Thanks
December 2, 2008 at 7:50 pm |
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.
December 2, 2008 at 7:55 pm |
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
}
December 2, 2008 at 8:08 pm |
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 + ““);
}
December 2, 2008 at 9:40 pm |
Thanks Hillel. Disabling multiselect worked like a charm. If I wanted to use multiselect, how to I get the list of items in there?
December 2, 2008 at 9:44 pm |
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.
December 2, 2008 at 10:21 pm |
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?
December 2, 2008 at 10:27 pm |
short answer:
add this class in your application css to decorate this component
PromptTextInput
{
backgroundColor: #222222;
color: #ffffff;
}
December 2, 2008 at 11:06 pm |
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;
}
December 3, 2008 at 2:04 pm |
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
December 4, 2008 at 8:37 am |
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
}
December 7, 2008 at 11:56 am |
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?
December 7, 2008 at 5:45 pm |
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
December 8, 2008 at 6:08 am |
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
December 12, 2008 at 4:06 am |
Hi,
Awsome work. When will the next version be available? Just one question, can I change the dropdown width?
December 12, 2008 at 7:58 am |
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
December 12, 2008 at 1:07 pm |
Great component! Congratulation and thank you to share this with us.
Cyril
December 13, 2008 at 10:14 pm |
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
December 13, 2008 at 10:27 pm |
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.
December 13, 2008 at 11:29 pm |
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!
December 15, 2008 at 2:19 am |
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.
December 15, 2008 at 10:39 pm |
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
December 15, 2008 at 6:25 pm |
Very good component… congratulations to you!
Thanks for sharing this with the community!
Cheers!
Casali
December 16, 2008 at 1:36 pm |
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
December 17, 2008 at 12:03 pm |
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.
December 17, 2008 at 12:12 pm |
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
December 27, 2008 at 7:41 pm |
[...] hillelcoren.com [...]
December 31, 2008 at 2:24 am |
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.
December 31, 2008 at 8:12 am |
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
December 31, 2008 at 4:18 pm |
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.
January 1, 2009 at 3:12 pm |
[...] you’ve come directly to this page I’d recommend checking out the post for the original version for more info on using the [...]
January 26, 2009 at 9:05 pm |
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
January 27, 2009 at 8:17 am |
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
February 2, 2009 at 1:57 pm |
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…
February 3, 2009 at 1:18 am |
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
February 6, 2009 at 3:21 pm |
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
February 6, 2009 at 3:26 pm |
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
February 14, 2009 at 1:30 am |
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.
February 17, 2009 at 3:30 pm |
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
February 24, 2009 at 4:46 am |
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
February 24, 2009 at 7:30 am |
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
February 24, 2009 at 1:08 pm |
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..
February 24, 2009 at 1:20 pm |
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).
February 24, 2009 at 2:28 pm |
HI hillel..
U r absolutely rite.. i need the user to enter multiple values as well as select the values from auto complete..
March 3, 2009 at 8:28 pm |
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.
March 3, 2009 at 8:39 pm |
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
March 3, 2009 at 8:50 pm |
Thanks Hillel. Awsome idea. Glad you like the site.
March 5, 2009 at 7:48 pm |
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?
March 5, 2009 at 10:21 pm |
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
March 5, 2009 at 10:53 pm |
Hey no worries at all. I really appreciate the great work you’ve done!
March 12, 2009 at 10:22 pm |
[...] you’ve come straight to this post I’d recommend checking out the first and second posts for this component for more info on using [...]
May 13, 2009 at 7:28 pm |
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
May 13, 2009 at 8:26 pm |
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> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var items:ArrayCollection = new ArrayCollection( ["one","two","three"] ); ]]> </mx:Script> <components:AutoComplete dataProvider="{ items }"/> </mx:Application>May 14, 2009 at 10:06 pm |
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
May 14, 2009 at 10:45 pm |
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> <![CDATA[ import mx.managers.PopUpManager; import mx.collections.ArrayCollection; import mx.containers.TitleWindow; [Bindable] public var items:ArrayCollection = new ArrayCollection( ["one","two","three"] ); 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 ); } ]]> </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
May 16, 2009 at 1:25 pm |
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
May 16, 2009 at 8:40 pm |
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
May 19, 2009 at 12:23 pm |
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.
May 19, 2009 at 1:28 pm |
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
May 28, 2009 at 3:27 pm |
This helped me a lot.
Thank you
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
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
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
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!
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
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!
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.
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
July 21, 2009 at 10:50 am |
[...] 0.90 released on November 10, 2008 [...]
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.
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.
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.
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.
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
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)”
November 26, 2009 at 11:13 am
thanks for the quick reply… works like a charm.
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
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
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