Safari-like Text Finder in Flex
Friday, May 23rd, 2008This is a component that mimics the text finding functionality in Safari. When you do a search it dims out the text field and highlights the currently found fragment of text. Other fragments in the text are currently set apart by a black rectangle, but I plan to change that. This is kind of like the Highlighter component on FlexLib http://code.google.com/p/flexlib/wiki/ComponentList
The currently selected text indicator can be a IDataRenderer component that you can specify in code.
I couldn’t wait to show it to people before cleaning the code … so here it is. Without code. But I’ll release the source to the public once I clean it up and fix a few bugs.
Things I still need to do:
- Allow custom renderer for non-selected item
- Fix scrolling issues
- Looks like I’m missing the ability to highlight items towards the very end of the text
- Simplify so it can be used as a component. Currently needs a few lines of AS code to get working
Some notable features:
- You are passed the text formats of the text fragment match so that you can render the text in the selected indicator exactly as it looks on the original text.
- You can pass a custom selected text renderer. Notice it has animations as you click for the next find
There is another version that works on an HTML control in AIR. There’s a problem with that, however, when the text match wraps; I can’t figure out a way to find the coordinates of the start of text that’s been wrapped to the next line.



