Flex 4 AutoComplete component with text highlighting

17 Comments

1. ichuk — March 9, 2010 #

   cool thing, thanks for the tip!

2. Badu — March 20, 2010 #

   Hi,

   first thank you for the comment on my website. Don’t worry about deprecation – I’ve used this kind of component as a base for something even beautiful. Imagine this component having a much more complex item renderer (let’s say details of a product)…

   Best regards and keep on! I like your solution too.

3. Steve — May 7, 2010 #

   This component works fine for me when I run the included sample test project.

   However when I integrate it into an existing project, it won’t highlight the matching text.

   it appears in the autocomplete skin that: itemRenderer=”org.HighlightListItemRenderer” is being ignored as putting breakpoints in HighlightListItemRenderer indicate it never gets invoked.

   I’ve been through every line of code and can’t explain this so any suggestions or ideas welcome !

   Thanks!
   Steve

4. JabbyPanda — May 7, 2010 #

   Hmmm. breakpoints in protected method highlightTexts() in HighlightListItemRenderer should ignite every time.

   Please, send me your project file to jabbypanda [at] gmail com and will look it over on Monday.

5. Steve — May 7, 2010 #

   JabbyPanda

   All sorted and working – and my error.

   The breakpoint was in highlightText() and this was not firing, I put a breakpoint in highlightTexts() and this did get hit and allowed me to discover that searchMode was not being set correctly.

   Thanks for the quick response!

   Ideally I would like to dynamically refresh the dataProvider array from a database (oracle) to reduce the amount of data I need to load into the array initially.

   I can query the database no problem (flex->apache->php->oracle are working great) but how do I get the text from the component to use as a search parameter to the database.

   Thanks,
   Steve

6. Steve — May 8, 2010 #

   Now working against Oracle tables !

   Was quite straightforward to implement because the component exposes the textInput control which allows for a new eventhandler that can populate the lookup array.

   Great component – thanks!

   Steve

7. Kyle — May 19, 2010 #

   I’m very new to flex / mxml / actionscript. I’m having trouble implementing this component into an already existing project. If it isn’t too much trouble, could somebody point me in the right direction?

   Thank you in advance.

8. JabbyPanda — May 20, 2010 #

   Hi Kyle,

   I did not package this component into single Flex SWC library file for the user convenience, albeit I might to do it someday.

   Thus in order to use this component within your Flex 4 Project you will have to manually unzip all source files for this component into “src” folder.

9. Venkat — July 2, 2010 #

   JabbyPanda,
   Entered text disappear from textfield if I tab to next component.

   First of all great work, really simple to integrate.
   Venkat

10. JabbyPanda — July 2, 2010 #

    That’s an intended behavior of the component.

    If you do not confirm the selection by choosing the item from the drop down menu, then the entered text is erased from the input textfield when focused out.

11. Myron — July 21, 2010 #

    Good job, JabbyPanda!

    I just want to tell you about two things I had little troubles with. First, one have to reorganize your packages structure in order to use the component in his app. If you modify it to something like “com.jabbypanda.*” it whould be very convenient.

    And another thing I have faced is connected with using cyrillic. It seems that RegExp(str,”i”) is not really case insensitive for cyrillic and you will get troubles with highlighting matches. I have fixed that by manually adding few toLowerCase in highlightTexts():

    var searchPattern :RegExp = new RegExp(lookupTextValue.toLowerCase(), “gi”);
    var firstFoundWordIndex : int = label.toLowerCase().search(searchPattern);

    and

    var matches : Array = label.toLowerCase().match(searchPattern);

    Except this thing everything works very well! One more thing I can mention – it’s not very convenient that highlighting colors are hardcoded.

    Thank you!

12. Saulo Brust — July 29, 2010 #

    Interesting and excellent component!

    I am developing a search input component based on this. If you want to take a look or collaborate: http://github.com/brust/SearchInput

13. JabbyPanda — July 30, 2010 #

    I agree with you, that hardcoded colors values used for character highlighting into HighlightListItemRenderer is not a flexible solution.

    You can add custom styles by youself to control those color values at the runtime, just have a look at source code of spark.components.supportClasses.ItemRenderer class to study how it handles custom styles such as ‘rollOverColor’ or ‘contentBackgroundColor’.

14. JabbyPanda — July 30, 2010 #

    2Saulo Brust: Please contact me via email jabbypanda AT gmail.com to discuss in more details the direction of development of SearchInput component that you are taking, I would be willing to help you out during the development.

15. Jens Wegar — August 13, 2010 #

    Hey,

    first off nice work on the component. I have to agree though with a previous commenter that it would be good if you put your code in a package structure such as com.jabbypanda.* for the next release. Also, as pointed out previously, the colors for the highlight in the list and the text in the list are hardcoded. I fixed this by changing the hardcoded values at lines 83 and 84 of HighlightListItemRenderer to:

    selectionFormat.backgroundColor = HighlightItemList(owner).getStyle(“highlightColor”);
    selectionFormat.color = HighlightItemList(owner).getStyle(“highlightTextColor”);

    This allows me to change the colors through CSS

16. Maxim Kachurovskiy — August 25, 2010 #

    Good job!

17. JabbyPanda’s travel to RIA world » Should my Flex 4 AutoComplete to be renamed as InputAssist? — August 25, 2010 #

    [...] I am currently in a process of updating the code for the component previously known as "Flex 4 AutoComplete component with text highlighting". [...]