Flex 4 AutoComplete component with text highlighting

March 8th, 2010

   Updated: More recent version of this component was announced at September.

   Disclaimer: My implementation of AutoComplete component is based on the revised codebase of AutoComplete 4 component originally created by Tenger Ivan from FlashCommander.org

   Two different search modes are supported : PREFIX and INFIX, to see the difference please play with the interactive sample file below.

Get Adobe Flash player

   The auto-completion operation can be achieved in two ways:

  • via keyboard
    First, select the list item by moving selected index via UP and DOWN keys and confirm the choice by hitting ENTER key

  • via mouse
    Just mouse click upon the currently selected list item.

       Disclaimer: the source code of this component is of beta quality and can be obtained for free here: ZIP file, 23 kb. If any bug is found, please let me know.

       UPD: Updated sample file with a real world list of 978 US universities.
       Also a few bugs were fixed related to case insensitive search and not working text highlight of the last string character.

    • ichuk

      cool thing, thanks for the tip!

    • 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.

    • Steve

      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

    • 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.

    • Steve

      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

    • Steve

      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

    • Kyle

      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.

    • 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.

    • Venkat

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

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

    • 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.

    • Myron

      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!

      • 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’.

    • 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

    • 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.

    • 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

    • Good job! 🙂

    • Pingback: JabbyPanda’s travel to RIA world » Should my Flex 4 AutoComplete to be renamed as InputAssist?()

    • Idan

      Hi,

      I am writing an application where the user can enter question depend on database the user choose.
      After each char I want do give user the current suggestion (it can be in the middle of the word also).

      Is it possible to do with this component ?

      Thanks

    • It would be cool to see it in the design mode of flash builder 🙂

      • Anonymous

        I do not think I will invest my time for this feature, sorry.

    • It would be cool to see it in the design mode of flash builder 🙂

      • jabbypanda

        I do not think I will invest my time for this feature, sorry.