This 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.
No Trackbacks
You can leave a trackback using this URL: http://machine501.com/blog/2008/05/23/safari-like-text-finder-in-flex/trackback/
5 Comments
That’s a whole lot of awesome… I love live-searching, and I really wish FB had live-searching in the editor (and wish they’d put back the context-highlighting, just not the ugly teal color).
very cool stuff, great idea
Great job!!
Very slick! Can’t wait to dig into the source code! :)
Thanks everyone who commented and/or checked out the demo. I think i’ll post the source code without much cleanup this week.
@Bill White: I checked out your site. cool components!