At this point I’m spending most of my time cleaning up the code. I started working on the component about six months ago and I find that when I look back on some of the older parts of the code I realize I’ve learned far better ways of handling things.
Here’s what’s new:
- Added browserFields property: This property enables you to specify which fields to display in the browser DataGrid.
- Reworked selectedItems: Adding/removing items from the selectedItems property will now update the values displayed in the AutoComplete.
- Added “search” method: If you’re using the component with a dynamic dataProvider, you can use the search function to display the dropDown if there are any matches.
- New demo: I’ve added two more tabs to the demo to show other examples of the component in action.
- Bug fixes: As always, I’ve gone through all the comments on the blog and made sure any issues found have been resolved.
I can’t thank the community enough for the enormous amount of support I’ve received. I’ve learned a tremendous amount from the fixes people have submitted. Please keep it coming…
Thanks,
Hillel
Hillel Coren 
Hillel,
I was indeed trying with the old version, the issue with the prompt is now as you described..
I could email you a modified version of the color demo if you wish. You could add this as an extra tab to demonstrate dynamic data and also adding new items programmatically.
Also perhaps a mailing list to let us know when you have a new version?
Keep up the good work.
Guy.
This is an excellent component. It does more out of the box than 20 other components could do together even after many days of tweaking.
Is there a demo or example where ‘selectedItems’ has been used as a source for binding?
Hillel,
Thanks for the great component.
I have two issues with the below setting:
.myStyle{
rollOverColor: #00ff00;
selectionColor: #006600;
}
hc:AutoComplete
styleName=”myStyle”
isBrowseable=”true”
dataProvider=”{dp}”
labelField=”fieldA”
1. myStyle doesn’t propagate to “Browse” datagrid popup when I’m scrolling the rows
2. Even though the labelField is set to fieldA, the “Browse” datagrid popup shows ALL the fields in the dataprovider. Is there a way to show only fieldA in the “Browse” datagrid popup event if the dataprovider contains fieldB, fieldC, etc..
tmv,
1. Currently the component doesn’t handle styles very well, this is actually on my list for the next release. For now you can style the dropDown by applying the style directly to the List component. ie,
<mx:Style>
List
{
rollOverColor: #00ff00;
selectionColor: #006600;
}
</mx:Style>
2. I actually just added this in the latest version (0.98.1). There’s a property called browserFields, you can pass it an array of the fields to display in the browser.
The allowDuplicates feature seems to have a bug. When I click on browse, both the grid and list type browsers work properly. But if I type directly into the textinput, already selected items can be selected again. The dropdown opens with selected items greyed out, but doesn’t prevent them from getting selected again.
Maneesh,
Binding should work out of the box with selectedItems. When working on the component I often use a List with it’s dataProvider bound to the autoComplete’s selectedItems property to test the component.
I don’t seem to be able to replicate your issue with the unique flag. In the demo, if unique is checked you can choose already selected colors from the dropDown but they aren’t selected. Am I missing something?
Thanks
after typed in some search text the search function is not invoked. I use searchChange as the event.
Albert,
The search function is never called by the component. It’s a helper function for when you want to use a dynamic dataProvider. If you have too many records to load initially you may want to do a search on the server once the user types the first couple of letters. In this case, when the user finishes typing the letters there are no matches yet so we don’t show the dropDown. Once the server returns with the data at that point we want to show the dropDown, this is when the developer would want to call the search function.
For the record, I think the name of the function sucks. I haven’t yet been able to come up with anything better though, as soon as I do I’ll change it (it’s clear that the name is confusing).
Hopefully this clarifies things a bit
Reading your FAQ, I’m happy to hear you’ve decided to work on cleaning up some of the component code.
Like you’ve already hinted at yourself, you’re spending a lot of time building extra features into the component rather than building a foundation for other people to use to extend the component further themselves.
My recommendation would be to split up the current component composition and make it into several components. Having a browser, list builder and many other things packaged into a single component leaves it too bloated, soon rivaling massively more complicated components, such as the DataGrid, in memory foot print.
Instead, provide the Browser and ListBuilder classes as a utility for user the use with the component, but let the wiring between AutoComplete and those types of classes (e.g. through a “Browse” button) be implemented by the user.
Stiggler,
You’re 100% correct that the number one concern right now is bloat. I very much like your idea of splitting it up into separate components and leaving it to the user to choose which pieces to include. I’m going to research this approach for the next release.
Thanks for the suggestion!
Hello,
first of all, great component.
Just one little bug I think.
Assume I have an ArrayCollection with the following items:
– key
– hat
– door
If I want to type ‘keyboard’, the component stops at ‘key’ and adds ‘key’ to the list. Perhaps I’m using the wrong settings? Would be great to have this fixed.
kind regards
Vic,
This is actually a ‘feature’. By default, the component will automatically select the item if it considers it equal. You can override this functionality by creating a function which just returns false and use it for the isEqualFunction property. A couple of people have been confused by the way this works so I’m hoping to simplify it in the next release.
Hillel,
I notice that the “change” event is triggered during initialization. For an example the below declaration will trigger a bunch of “change” events because of mySelectedItems are being assigned. I want to detect the “change” events caused by user interacting with the component and not the “change” events caused by the code. The flex component mx:TextInput text=”hello” for example will not trigger a change event when it’s initialized with the text “hello”. However it will trigger a “change” event when a user interacts with its and changes its value. I have tried “dataChange” event, but that didn’t work for me either. My goal is to detect data change of your component through user interaction so I can enable the Save button on the form.
hc:AutoComplete id=”autocomplete”
isMultiSelect=”true”
isBrowseable=”true”
useListBuilder=”true”
dataProvider=”{dp}”
selectedItems=”{mySelectedItems}”
labelField=”id”
change=”autoCompleteChange(event)
Hillel,
I’m running into the same problem that Maneesh stated above “The allowDuplicates feature seems to have a bug.” To replicate with your demo,
1. Select Color Chooser Tab
2. Check Unique, Browseable, Multiselect
3. Select Vertical
4. Check List Builder
5. Hit Browse Button, and add Almond and Apricot
6. In the “Choose your favorite Crayola crayon” search box type the character ‘a’, you can see that Almond and Apricot are grayed out, but you can select them again and they will be added to the selections. Hence there are now 2 Almonds and 2 Apricots in the selection box above the search box.
tmv,
Thanks for pointing these issues out. You’re absolutely right that the component should only dispatch a change event when the users changes the selectedItem property. Also, it’s clear that the unique property isn’t working correctly. I’ll put up a new version in the next couple of days which resolves these issues.
Thanks!!
tmv,
Thanks again for pointing out the issues (and providing clear steps to replicate them). I’ve just checked in fixes for both issues to the google code site.
Hi, first of all, thank you for this component.
I found a bug related to ‘<‘ character.
Try to load the dataProvider with…
{“name”:”PA02/FIO2 (MMHG)”, “email”:”patty@yahoo.com”},
{“name”:”<400+-/RESPIRATORY SUPPORT”, “email”:”otto@gmail.com”},
{“name”:”<300+-/RESPIRATORY SUPPORT”, “email”:”nelson@aol.com”},
The search can’t be done right when you type ‘<‘.
Rafael,
Thanks for catching this. I’ve just checked in a fix to the google code site.
Hi!
I would like to make a suggestion…
For example, when I use the borderStyle property, if it is set to “none” I think the element TextInput should be “none” too.
Rafael,
You’re right, redoing how I’m handling styles in on my list for a future release. For now, if you’d like to remove the border you can do the following.
autoComplete.combo.flowBox.setStyle( “borderStyle”, “none” );
Note: I’m trying to wrap up the next release. I’ve done a fair amount of refactoring so if you use this in your app and then upgrade once it comes out you’ll need to change it to
autoComplete.flowBox.setStyle( “borderStyle”, “none” );
Hi
Great flex component, thanks for sharing it!
I have a question: It seems, that im passing the dataprovider arraycollection as a reference to the component. (So if im typing the dataprovider constantly changes)
Is there a way to get the original arraycollection?
(I’m making a dynamic dataprovider, and before adding elements i want to check wether they are in the source arrayCollection already)
Thanks for help!
Sydd,
If I’m understanding you correctly, I think this post may answer your question.
http://hillelcoren.com/2008/10/06/flex-tip-how-to-get-all-items-ignoring-the-filter-in-an-arraycollection/
Thanks, this was what i needed 🙂
i have another question:
how can i sort the search results? Or what field do i need to alter/override to change it?
for example in your e-mail demo when i type in “de” i want “Declan Desmond” as my first hit,cause its more relevant, than “Borton Wendell”
Thanks
Sydd,
To sort the results, you’d need to create a Sort object and set in your dataprovider. Here’s an example
http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/
Hillel
Can i get the source code for dynamic dataprovider.
It is confusing to implement this functionlity from the discussion posted on the blog.
Anupam,
Here you go (courtesy of Guy)
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:hc="com.hillelcoren.components.*" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" color="#000000" xmlns:local="*" initialize="init()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var colors:ArrayCollection; private var delayTimer:Timer; private function init():void { colors = new ArrayCollection(); } private function handleSearchChange():void { if (delayTimer != null && delayTimer.running) { delayTimer.stop(); } if (autoComplete.searchText.length > 2 && colors.length == 0) { // if you remove below line then it kind of works // but it is more correct to remove all data // before repopulate. Really it is just holding // on to stale data colors.removeAll(); delayTimer = new Timer( 500, 1 ); delayTimer.addEventListener(TimerEvent.TIMER, showComboAll); delayTimer.start(); } } private function showComboAll( event:TimerEvent ):void { colors.addItem( { "name":"Almond", "hex":0xEED9C4 } ); autoComplete.search(); } ]]> </mx:Script> <hc:AutoComplete id="autoComplete" dataProvider="{ colors }" labelField="name" searchChange="handleSearchChange()"/> </mx:Application>Hi Hillel,
thank you for the new version. So now i’m able to select, which data i need in the browsePanel.
i happens after typing in some letters that i see a tooltip with unneccessary letters in html-tags.
i recognize, there are some settings for tooltip, but there are not documented. it is poosible to switch off the tooltip?
tooltip=”false” won’t work
thanks in advanced
Frank
Hi Hillel-
Love your component. I am trying not to modify your code in any way and instead extend it, so that I can continue to implement your updates easily 😉
A few questions regarding styling.
1) What is the path to the prompt text that appears before anything is selected? I would like to change the color of it. (I tried this.combo.textInput.setStyle(“color”, “#FF0000”); but it didnt work)
2) Is there any way to extend the styling of the selected items beyond your “facebook” and “macMail” styles without actually modifying the SelectedItem.mxml doc? If so, can you give me a quick example? Maybe just show how to change the text color? Ideally, I would like to add my own borderSkin or backgroundImage to them.
Thanks for your help.
Mike,
Support for styles and skins is on my list for the next version.
1. The color is currently set in a constants file (a clear sign that it should really be a style). You’d need to use the source code and change the value in Consts.as
2. I’m sorry, there’s no way to do this yet. As I said, I hope to support this in future. Hopefully it won’t be too hard for you to carry over your changes to the next version.
Thanks Hillel. What is the path to that text? I might be able to overwrite the color by overriding the commitProperties() function.
Any idea when your next version will be out?
Mike,
I’ve just checked in changes which add support for the promptColor style. You can get the latest version of the code from the google code site.
Mike,
I’ve just checked in support for skinning the selectedItems. I’ve also added a simple example showing how to use it.
Let me know if you run into any issues.
Thanks Hillel. I still can’t seem to change the text color. I tried this.setStyle(“promptColor”, “#FF0000”) and this.textInput.setStyle(“promptColor”, “#FF0000”) but couldn’t get the color to change… how do i change it?
Thanks again.
Mike,
You’re right, there seems to be an issue with the way I implemented it. It should work if you specify the color in MXML, ie,
<components:AutoComplete prompt=”Test Prompt” promptColor=”#0000FF”/>
Mike,
Thanks for pointing this out, I’ve figured out the issue (and checked in the fix). i didn’t realize that when overriding the styleChanged function, if the styleProp variable is set to null it means set all styles. It should now work using either approach.
Hi,
Great component. Question…
Right now, when the list pops down, the user can use arrow keys to navigate to an item then hit the ENTER key to select the item, then TAB to the next field.
The users really want to skip the ENTER key. In other words.. navigate to the item with the arrow key, hit the TAB key, and have it both commit the selection and move on to the next field.
Any ideas?
Thanks!
Jones,
It should already works this way. Can you please test it in the demo.
Thanks
Sure does. I have a sightly older version. Time to upgrade 🙂 Thanks.
The new version in SVN is broken. It does not trigger a change event at all.
Maneesh,
Do you want to try updating your codebase. I’m not able to replicate the issue but I’ve made a lot of changes over the weekend.
Hi Hillel, was wondering if there is a way to restrict entry into the text entry boxes to say, just numeric entries?
for example, the source for the text entry box is a set of address zip codes/postal codes (which are all numbers).
Mei,
Here’s one approach…
<mx:NumberValidator source="{ autoComplete }" property="searchText" listener="{ autoComplete.flowBox }" triggerEvent="searchChange"/> <components:AutoComplete id="autoComplete"/>Hi Hillel
thanks for the reply,but i’m using an older version (feburary 2009), and i’m not certain what you mean by autocomplete.flowBox for the listener and the SearchChange for the triggerEvent. sorry about that
Mei,
I’d recommend upgrading to the latest version. Is there a particular reason why you haven’t?
Hi Hillel
i understand that the new version comes with a lot of good stuff…i haven’t upgraded as i actually only need the textbox autocomplete functionality. actually i also keep getting errors trying to run the new version in flex builder
Mei,
Asides from the additional features, there are a number of bugs in the older versions which have been resolved. I understand that you only want to use the autocomplete functionality. In the next version (which I hope to release shortly) I’ve actually split it into two separate components: AutoComplete and AdvancedAutoComplete. The AutoComplete is simply the autocomplete combobox while the advanced one includes browsing, sorting and ordering.
If you’d like, I’d be happy to help you resolve the errors you’re getting in Flex Builder.
Hi Hillel
thanks for the help, even though it’s supposed to be simple, i seem to be having issues running the project. after importing into Flex Builder and trying to run the project, nothing happens?
While if i try to run it in flashdevelop, the error “Error: a target file must be specified” is shown, even though the target has been specified.
Mei,
Have you tried doing a “clean build”?
Hi Hillel
i’ve tried that. nothing happens in flex builder. any suggestions? No errors are report upon build though. There is no option to “run application” either when i right-click on any of the example mxml files.
Mei,
I’m not sure which version you’re using but in the latest code most of the examples are no longer runable applications. You need to launch the Demo.mxml file (the other examples are tabs in the Demo).
Hi Hillel
thanks for the help. apparently i can’t run the imported Version 0.98.1 project. But if i create a totally new empty Flex project and include the swc, that will work. Go figure.
Hi Hillel,
First of all thanks for this excellent component. Its extremely helpful!
I just ran against an issue while wrapping autocomplete in MDIWindows. I am sure this can be reproduced wrapping autocomplete in any container that allows resizing.
I have its width set to 100% and it behaves well when I expand the window. But when I contract it, autocomplete still stays at the same size and causes a horizontal scroll bar to appear. Setting horizontalScrollPolicy=”off” etc didnt help either.
Was hoping you could guide me through.
Many Thanks,
Aman
Aman,
I’ve had sizing issues with the component for a long time. It looks like the root of the problem was the flow layout algorithm I was using. I’ve incorporated a much better algorithm written by Eric Cancil (http://blog.appdivision.com/2009/02/18/flex-flowcontainer/) and it seems to have solved a lot of the issues. If you’d like to be a beta tester you can checkout the latest changes from the google code site.
Let me know if you run into any issues
Thanks for this very useful component. Looking forward to the refactored version.
I was also having trouble using a dynamic dataProvider: my searchChange function was not getting triggered either (like others http://hillelcoren.com/2009/04/07/flex-autocomplete-version-0981/#comment-405). The reason was that the variable I had bound as the dataProvider was initially null, and was later set by the searchChange handler. However, in the Combo component of AutoComplete, if the dataProvider is null, the searchChange event is not dispatched.
I’ve initialized the dataProvider with an empty ArrayCollection for now, though I think it’s a bug (since users can change the ‘searchText’ of the component, the event should be fired, with or without a dataProvider), and have filed an issue on the google code site.
Chadwick,
Thanks for pointing it out, that’s definitely a but. I’ve changed the code so it fires the change event before checking for the dataProvider. The fix has been checked in to the google code site.
Hi Hillel,
great job on the component and especially on your implication in its evolution.
I think i’ve noticed two bugs:
1) When selected an item longer than the input’s width, a bit of the right part of the component becomes white, perhaps the combo’s dropdown arrow?
Other than that, the item is correctly selected and the label is whole. there’s just this graphic bug.
2) I’ve been using a validator on the component and unfortunately it seems as though the native validation error behavior (i.e. changing the border to red and a thick red on focus) doesn’t work. I’m guessing this falls under the Styling upgrades you plan in your next release but i thought i should point it out just in case. Btw, i was able to work around the bug by changing the border color manually through combo.flowBox.setStyle(“borderColor”, “#ff0000”). however, i haven’t been able to change the focus color. Would you know how to manage that?
Thanx a lot and keep up the wonderful job
P.
Pier,
Thanks for the feedback. Both of these issues should be resolved in the next version.
For issue #2 please see my solution posted on the FAQ page yesterday:
http://hillelcoren.com/2009/04/03/flex-autocomplete-faq/
Thanx Attila, works like a charm
Hi Hillel,
I think you have a great component here. i am just wondering if theres anyway to disable the selected style (instead of Facebook,Macmail,Underline,etc) because when someone clicks on an item in my dropdown i want it to clear the search box (while i do other things with the interface, of course).
is that possible in this version?
thanks!!
Anonymous,
I’m sorry, I’m not sure I follow your question. Could you please rephrase it.
Hi, I’ve been trying to upgrade to the latest version (from svn). So far, some really nice improvements. However, I’m really not liking the way the selected items are styled by default. Well, first of all, which version should I be using.. the one at the download link or svn?
I’ve tried both and setting selectedItemStyleName seems to have no effect. I’m trying to get the underline style working. Using the version at the download link, it’s stuck on the mac style. And using the version in svn, it’s stuck on a style that kind of resembles a silver’ish button.
Is there any trick to getting the underline style? I’ve tried setting selectedItemStyleName in both MXML and AS.
Thanks!
Jones,
Your first question was which version should you use. The downlink provides the most stable version, while SVN has the latest changes. I’d suggest using the SVN version only if there are new features which you need. In a nutshell, the next version fixes a number of bugs, adds support for skinning as well as an actions menu.
In 0.98.1, the styleName field is a property while in the SVN version the name has been changed to selectedItemStyleName and is now a style instead. I’ve tested the latest code and it seems to work for me. I’d suggest doing another update from SVN. If that doesn’t work, please post the code you’re using to set the style and I’ll take a look at it.
Thanks for checking into it. I still cannot get it working.
I started off with just adding the svn project reference to my project to use it as a lib. Now I’ve tried using your pre-compiled lib from svn and also trued running the demo from svn in my environment. Results are..
– Using the component from svn in my project, results in styling problems for selected item and also the ‘change’ event never fires.
– Running the demo from svn in my env, results in the selectedItem styling problem but the rest of the demo seems OK.
I’m guessing it has something to do with not being able to find the css file? No matter what style I apply through the demo UI or code or whatever, nothing happens. I can send you a screen shot if you’d like.
FYI – Adding the following to the AutoComplete.mxml fixes the style problem for me.
Not sure why it wasn’t in there somewhere to begin with..?
Now, if I can just figure out why ‘change’ event only fires when I DELETE an item. If I select an item, nada. Only when I remove that selected item does ‘change’ event fire.
Looks like this can’t handle embedding xml. Here’s what I added (that got removed from my previous post).
mx:Style source=”defaults.css” /
The problem with the change event is that you’re dispatching the event based on user input, but you’re missing the mouse click event. I think you’re doing it the way you are based on some feedback here suggesting that ‘change’ should only fire based on changes from UI vs programmatic changes. I think that’s the right idea to keep things consistent, but if you’ll notice, even in your demo link above, clicking on the item with the mouse does not fire the change event. Only keyboard operations do.
Jones,
I’m sorry, I”m not able to replicated your issue. I’ve tested it with the 0.98.1 SWC and it looks like the change event is fired whether the item is selected with the keyboard or the mouse.
Jones,
I spoke to soon. Although it does work with 0.98.1, it looks like it’s broken in the version in SVN. I’ve just checked in a fix.
Hillel,
My client needs to be able to create new items by continuing to type after a match.
I’m having a hell of a time with setting isEqualFunction. Keep getting TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.hillelcoren.components::AutoComplete/set isEqualFunction()[/Users/hillel/Code/flex-autocomplete/src/com/hillelcoren/components/AutoComplete.mxml:1144]. This is when I attempt to edit a datagrid item which I’m using the AutoComplete as an item renderer.
Jeff,
I think I see the problem, this should be resolved in the next version. I’d suggest trying the latest SWC from the google code site.
One note, in the next version this functionality has been changed slightly. The isEqualFunction has been removed, instead there is an autoSelectEnabled flag which you can simply set to false. If you’d like to set custom logic, you can set a value for the autoSelectFunction property.
Let me know how it goes
Hillel,
Thanks – sounds great on the next version – do you have an idea of when that will be available? For now, I’ll try your suggested workaround.
Jeff,
If you’re feeling adventurous you can start using the new version today, it’s available on the google code site. At this point it should be pretty stable (but I could definitely use a little beta testing).
Thanks Hillel,
I’m a bit confused – the AutoComplete-0.98.1.swc doesn’t seem to include the autoSelectEnabled attribute yet and I’m not seeing a newer version on googlecode.
Jeff
Jeff,
If you checkout the code from the SVN repository on the google site there’s a bin folder which contains the latest SWC file.
Thanks very much Hillel,
I downloaded the latest, and the autoSelectEnabled does work (!) but what seems to be missing is the text attribute.
My logic in adding a new item to dataProvider has me checking to see on keyDown if selectedItem is null and if text is not a zero length string and that the keystroke is Keyborad.ENTER, but somehow the text property is not getting updated as I type – I can do this manually, but is that what is intended as the best method to add to the dataprovider?
Jeff
Jeff,
It looks like the text value isn’t updated until the keyUp event is fired. I’ve tested this on a basic TextInput component and it seems to behave the same way.
Hope this helps
Hello Hillel!
Your component looks incredible, and I believe it is perfect for a project I am working on. I hate to have to ask, but I am a Flex newbie and I don’t really understand how to go about using your component.
I see that you have included a .SWC file with your download. Is it possible to simply use this file within my project, or do I need to include the bulk of your source files within my project?
As a test, I have included the .SWC as a library in my project and created a new area of my app that loads your EmailDemo.mxml code. My app builds without errors (after copying simpsons.txt in my app root), but when I attempt to use the autocomplete feature I receive the following error: “Error #1009: Cannot access a property or method of a null object reference.” This is perhaps because it appears to be trying to reference a path that doesn’t exist on my computer (/Users/hillel/Code/flex-autocomplete/src/…).
Any ideas? Thanks very much!
John,
You just need to copy the SWC file into your lib folder.
Using the latest version, I still cannot get the change event to fire. It was working in the previous version (0.98 I believe).
Here is a stripped down test case:
The code got censored. You can see it at http://snippets.dzone.com/posts/show/7271
Maneesh,
Please try the latest SWC in SVN and let me know if it resolves your issue.
Thank you.
Yes, now it does work properly on mouse selection. However, it still does not fire a change event on auto-select. If you run my test app, and type sunday in the textinput, the entry for sunday gets auto-selected, but no change event happens.
Another problem I am facing is with the ‘enter’ key. If the AC is part of a form which has a default button, pressing enter on any entry in the drop-down submits the form. This is not consistent with a mx:ComboBox, whether editable or not. Pressing enter in the dropdown should only select a value, not submit the form.
I have two more suggestions.
Currently, there is no way for the user to open the dropdown without typing something. If the user has no idea about the existing entries, he has to randomly try different keys before he can actually see the dropdown. Combobox has a small arrow button which can be clicked. I know you have the browse button for advanced cases, but that is overkill for simple situations.
Second one is probably easy. In the multiselect list builder, double clicking an item should send it to the other list. This will make it more intuitive.
Maneesh,
All good points
1. No change event when values is auto-selected: I’ve just checked in a new SWC which should resolved this issue.
2. Enter key & default button: Yes, I agree that it shouldn’t submit the form. This is a bit tricky though, I’ll need to look into it.
3. Arrow button to show dropdown: In the latest version in SVN I’ve added an inlineButton property. You can use this to create your own button, I’ve provided an example below. Please note this isn’t quite ready for prime time (I would definitely appreciate feedback on this though).
4. Double clicking should add value in List Builder: That’s a good idea (and was easy to implement). I’ve just checked this in.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="com.hillelcoren.components.*" verticalAlign="middle" horizontalAlign="center"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var _data:ArrayCollection = new ArrayCollection( [ "one","two","three" ] ); private function handleButtonClick():void { autoComplete.search(); autoComplete.showDropDown(); } ]]> </mx:Script> <components:AdvancedAutoComplete id="autoComplete" width="150" dataProvider="{ _data }"> <components:inlineButton> <mx:Button width="22" height="18" icon="@Embed(source='/com/hillelcoren/assets/icons/down.png')" click="handleButtonClick()"/> </components:inlineButton> </components:AdvancedAutoComplete> </mx:Application>Hillel,
Not sure what to do at this point – I don’t seem to to have access to a text value I can use to update the dataProvider. I see a text value when I select an existing dataProvider item but not if I am just typing.
Jeff
Jeff,
I think I see the issue now, you want to use the “searchText” property.
Hillel,
Thanks so much for hanging in with me on this – works perfectly now, delivering the best of both worlds – selecting existing items and adding/selecting arbitrary new items.
Jeff
Jeff,
Awesome, happy to hear it. Let me know if you run into any other issues.
wow.
That was quick. ‘change’ event on auto-select is now fixed. Will try the other two and give feedback in due course.
Looking forward to fixed enter key behavior.
Thanks again.
Maneesh,
I’ve figured out the issue when using the defualtButton parameter on the form. I’ve made it so the enter key is ignored if the dropDown is visible but does get passed through if the dropDown is not visible (this is different than the ComboBox which never triggers the defaultButton). I’ve just checked in the changes.
For a while I thought this may not be possible to fix as it’s not possible to prevent the keyboard event from propagating. In case anyone’s curious, this was solved by setting focusManager.defaultButtonEnabled to false when displaying the dropDown.
You rock.
Am I doing something wrong? The new version does not compile for me. Flex Builder says that it cannot find the Embedded icon files from lines 81-83 in default.css.
If I remove the first ‘/’ from the address, it compiles perfectly.
On a similar note, is it just me or is the chronological sorting of comments broken on this blog?
Maneesh,
Thanks for catching that, it’s a mistake. The component is currently in a pretty broken state (working on some issues) but I’ll try to check in a fix later today.
I found another anomaly. I am using the ‘change’ event to set the focus to some other textInput in the form. This works perfectly when I select using the mouse or keyboard (tab / enter). But if the item is auto-selected by typing whole label from keyboard, then the drop down remains open after the setFocus.
Maneesh,
Yeah, I noticed that too. If you do an update from SVN the issue should be resolved.
Thanks!
Using latest update from SVN (r102).
runtime error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
on line 45 of FlowBox.mxml. The line says:
systemManager.addEventListener( MouseEvent.MOUSE_MOVE, handleMouseMove );
Maneesh,
Sorry about that, please update and try again.
yes, works now, but I discovered another one. 🙂
The valueCommit event is not triggered if the component is changed programmatically or through binding.
Maneesh,
Thanks for pointing that out, here’s how I have it setup now. The change event fires any time the user changes the selectedItems, while the valueCommit event fires any time the selectedItems changes (either by the user or programmitcally).
Let me know how that works for you
Thank you. I think this will serve my current requirement.
Sorry if I am bothering you too much. I am a flex noob and trying to learn. I found your component very useful and want to make sure it fits well with my scheme of things.
Not at all, your feedback has been tremendously helpful. Please keep it coming.
1. Can there be a way to directly show the list builder without showing the default view? I know this may be asking for too much, but no harm in discussing it.
2. Why must the inlinebutton icon be programmed the way you suggested above? I think it will be much simpler to have a boolean property called showDropdownButton. Also, this should show all the time, not on mouseover.
3. Can we have a default actionsMenu? The ability to customize the menu is good, but most of the time we do not need to.
4. When using the default selectionLayout, the showRemoveIcon property works well. But if we use the vertical selectionLayout, showRemoveIcon becomes useless.
5. How can we set the height of the list box when using selectionLayout=’vertical’?
Maneesh,
All great points…
1. That’s a good idea, I’ll add it to the list for a future release
2. Agreed, also on the list
3. Agreed, this is easy enough to do so I’ll add it to the upcoming release.
4. I’ll need to look into that
5. I’ll add that as a property for the upcoming release
Thanks!!
Maneesh,
Just wanted to let you know that I’ve just checked in changes which add support for using the ListBuilder as a stand-alone component.
Thanks for the suggestion!
I love your component, saved us so much development time. We are working on a medical record system for residential schools in developing countries and easy data entry is a critical aspect to our system, so thank you. Anyways, I have been reading through the comments and have been trying to figure out how to prevent an item from being selected when a match is entered. For example, if you wanted to enter in a new item say ‘bookstore’ and ‘book’ was in the list, you wouldn’t be able to enter in bookstore from typing it out. I tried setting the isEqualFunction to a function that returned a boolean value of false, but that didn’t work. It returned some deep error in FormItem.as.I know the new build has a convenient autoSelected=”false” flag, but I could not find the documentation on how to make the other things work. For example, I couldn’t figure out how to make the browse button work with the current version in googlecode. Could you post some documentation or tell me how to convert this line to work in the most current code on google? (when’s the new one coming out anyway??) Heres the line:
Heres the line :
AutoComplete id=”searchMedicationTI” dataProvider=”{medications}” labelField=”name” style=”facebook” matchType=”anyPart” isBrowseable=”true” browserFields=”name” enableRemoveIcon=”true” width=”150″ isStrict=”false” backspaceAction=”remove” isEqualFunction=”equalFunction”
Mohammed,
I had hoped to release the new version already but I’m stuck on a particular bug. In the new version, if you type a value which is longer than the component the TextInput doesn’t scroll (hopefully that isn’t an issue for you).
Here’s a breakdown of the name changes:
isMultiSelect allowMultipleSelection
multiSelectLayout selectionLayout
isStrict allowNewValues (note: logic is reversed)
areNewItemsEditable allowEditingNewValues
isBrowseable showBrowseButton
isOrderables howOrderButtons
styleName selectedItemStyleName (note: now a style)
One more thing…
In the new version, I’ve streamlined the AutoComplete component and moved a lot of the extra features (such as the browse feature) to an AdvancedAutoComplete component.
There is ‘null’ error on line 81 of advancedautocomplete.mxml. Looks similar to the one I reported earlier.
Maneesh,
Can you show me the code you’re using to instantiate the component which causes the error
Thanks
I extended your component to add a couple of features. I do this with many components, and the same code works properly if I extend AutoComplete, but not with AdvancedAutoComplete.
My extension adds two features. One is a property called value. This needs a property called dataField to work properly. I think you can guess what it does.
Second feature is a property called remoteDataProvider. This one is tuned to my application. It gives me a shortcut so that I can let the component do it’s own loading of dataProvider from the server, instead of writing that code in each module.
I have successfully extended the standard mx:ComboBox, mx:DataGrid, mx:Repeater, mx:AdvancedDataGrid and hc:AutoComplete, all with almost similar code. But when I extend hc:AdvancedAutoComplete, I get a RTE on line 81. That line is trying to add an eventListener on systemManager. If I change it and remove the systemManager (so that the eventListener is added to ‘this’) then the problem goes away, but I do not know if this is right.
If it helps, this is a sample invocation:
Sorry, problem with the code again. Here again:
(zy:ZyRDPAutoComplete id=”employeenameAC”
allowNewValues=”false”
matchType=”anyPart”
allowMultipleSelection=”false”
remoteDataProvider=”employees”
value=”{keys.employeeid}”
labelField=”label”
/)
Maneesh,
The line of code causing the error is used to position the dropDown menu when the browser is resized, but… it looks like it’s actually not needed. I’ve just checked in a new SWC with the line removed.
Thanks for pointing it out, sorry for the trouble it caused you.
Hi Hillel,
A big thanks for writing this component and making it available. Love the flexibility and solid feel.
Just a little feature request…
I incorporated the component into our app and managed to confuse the boss no end: he expected to be able to delete items by clicking and dragging the mouse to make a selection, then clicking delete, like you could with an equivalent TextInput field.
I tested Apple Mail and it supports this method of selecting, it even coalesces multiple selections into one big blue bar. Don’t need the coalescing bit though.
I tried to have a look myself at how this happens in Flex, but unfortunately the code for mouse selection of text seems to happen mainly in the Flash TextField class, which I don’t have source for.
Any pointers for how to implement or if you are interested in implementing would be great.
Cheers,
Charlie
Charlie,
I’ve wanted to make the same change myself however I’ve a got a long list of other features which are more important to the company I work for. I’d be happy to try to help you to get it working though.
Here are a couple of pointers/questions to get you started:
– Make sure you’re using the code from the google code site. I’m just about to release a new version. I’d also be happy to give you checkin privileges so we can incorporate your changes into a future release.
– Which style are you using. The question here is do you want to support selecting a part of an item (ie, if you’re using the underline style) or is selecting the whole item ok.
There may be a lot of back and forth here so I’d suggest emailing me any questions.
Best,
Hillel
Hi, first of all, great component. I specially appreciate the search() method, so I can query remote data 🙂
I have one problem: i try to have the autocomplete (ac) the same style as the textinput, but i’m not getting there:
I managed to disable all default skins for the components the ac uses, but I cannot seem to control the focus border that is generated by the ac.
Do you have any idea how I can accomplish this? Thanks in advance!
Has anyone had any issues with the Facebook style not working in Flex 4? When I set selectedItemStyleName=”facebook”, it just shows the blue highlight but not x on the right side to show you can delete it, thus macMail and Facebook style look the same. Underline is working correctly.
THX
Jason,
To get the x to appear you need to set the showRemoveIcon property to true.