JavaScript find box

Question

I'd like to duplicate the find feature (Ctrl-F in Firefox) for my users. In other words, a text box that as the user types, it finds the first occurrence of that text, and if they press "Next", it highlights the next occurrence and moves the page if necessary.

I'm thinking the search input would have to be in a div that remained fixed, and as it found what it was looking for, would insert a named anchor just before it and then follow the hyperlink.

Do you think this can be done?

Doesn't the existing find functionality already do this, if the user really wants to? — Matchu, May 18 '10 at 14:41
Don't re-invent the wheel. Why not just let the user use the BUILT-IN functionality of their web browser? — djdd87, May 18 '10 at 14:47
My client has demonstrated to me that his users don't know how to use the built-in find feature. — Phillip Senn, May 19 '10 at 03:37

score 4 · Accepted Answer · edited May 23 '17 at 12:18

Finding, highlighting and stepping between instances of text on the page (especially as the text may be split across multiple nodes/elements) properly is tricky. See this question for a find-text-in-page-across-elements function you could adapt.

You can do a noddy version more simply, but that's likely to be less useful and less usable than the browser's built-in Find.

Since the browser's own Find already has the functionality you describe, there's not really a good reason to do it, unless you need extended functionality the browser can't support itself. Typically, you resort to this when you have hidden interactive elements on the page that need to be shown when results are found in them.

My client thinks his users won't know how to press Ctrl-F. – Phillip Senn May 19 '10 at 03:36 — Phillip Senn, May 19 '10 at 03:36

score 2 · Answer 2 · answered May 18 '10 at 14:51

It can certainly be done. I would look into other plugins that may already contain a lot (if not all) of the features you're looking for. Be sure to do your own digging at http://plugins.jquery.com/, but here are a couple that look promising...

http://vision-media.ca/resources/jquery/jquery-inline-search-plugin http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

And here's a fun little effect to help you get into the more aesthetic side of things... http://www.recoding.it/wp-content/uploads/demos/seek-demo.htm

score 1 · Answer 3 · answered May 18 '10 at 14:51

Yes, it's pretty simple. Just search the text() of all elements below body for the text and wrap it in a span and then use the standard page scrolling code to make it visible.

The only drawback: Your search code will fail for code like hello because text() doesn't span tags and even if it would, the resulting HTML would be illegal (hello when searching for "hell")

JavaScript find box

3 Answers3