Search hilite

One of the greatest features of Google toolbar is the highlighting of search terms. However most users don't know about Google toolbar or can't install it due to technical "limitations", such as when using browsers other that IE or Firefox :) I thought it would be a nice idea to highlight search terms on my site without having to install additional tools.

Fortunately there are some great plugins for WordPress as well as for ExpressionEngine that parse the HTTP header information and wrap spans with a certain class name around the respective words. I’m sure that similar plugins are also available for other CMS. So if you know some recommendable plugin, please post them in the comments section.

In my case I used the Search Highlighter plugin by Paul Burdick that highlights search terms for incoming searches from A9, Dogpile, Google, Lycos, Yahoo and… ExpressionsEngine. Yes it also works when using my own search engine. Nice :) Anyway just grab the plugin of your choice, configure it - and you’re basically done.

Scriptaculous Highlight

However I thought it would be even nicer to additionally highlight search terms using the “Highlight” effect of Scriptaculous’ effects library. So I made up a simple, Prototype based JavaScript class that applies the “Highlight” effect to all elements with a certain CSS class. I guess this will be appropriate in most cases. However feel free to tune, expand, modify and of course reuse it.

Download JavaScript Hilite Class

Well I guess I’ve tantalized you long enough - if you wanna check out the functionality just switch to Google, enter for example aqua style and click the link to my Aqua style tutorial. Btw make sure that you turn off ExpressionEngine’s cache functionality for the pages you wanna “enhance” with the highlight functionality - otherwise it won’t work :)

16 comments

WOW, nice effect i like it a lot. Really useful for me. Thanks

adrmis

Clever! Love your site design !! :-) Bye Bye

monkey56657

You might want to add a "site:bartelme.at" to your Google link; your site doesn't show up in the results for me.

Kenzie

Just a heads up that the Google Toolbar is also available for Firefox and I actually prefer it over the in-browser search.

Jonathan Snook

Looks great. Just a 'bug report' (or maybe unavoidable wrong behaviour): if you search for 'site:bartelme.at searchterm,' it will highlight all the 'at's on the page too.

Andrew

Oh, I didn't actually know that Google toolbar is also available for Firefox. Thanks for the hint :) As for the "at"s - I also noticed that. However I can't do anything about it since the highlighting is exclusively done by the plugin.

Wolfgang

Cool! Thanks.

Brutal

Awesome! i love it :)

Shani elharrar

I would *highly* recommend adding a widget to allow the user to turn hiliting off. It becomes very annoying very quickly.

Tim McCormack

Excellent! I've only ever implemented this with PHP server side scripting (I'm really mostly a server side coder) so bringing in Scriptaculous effects is a great idea. Thanks :)

Summer Flowers

Sure it's cool, but I'm not sure it's an improvement. I felt like I had to scroll down the page quickly before the contextual clues went away so I could memorize where they were. Users that don't know what's going on may not figure it out in time. In a long article, the hilite might fade before the user sees it. It's not that I dislike the fade, but I think a risidual hilite is necessary. Perhaps reverse the fade so that the hilite fades in (instead of fading out).

David Benton

Actually, I think I will have it fade and then bring in a checkbox for 'show referred terms' (I'll think of a better label than that) I do dislike the look of pages with the 'referred text' marked, but it is useful *sometimes*. For other searches it can be a distraction. So, I'll show it at first, let it fade away, and then let the visitor turn it back on if they want (it wouldn't fade the second time). I like it! :)

Summer Flowers

Yeah - that's a good approach. Have to think about it… :)

Wolfgang

Gute Idee. Verbessert Benutzerfreundlichkeit und Aussehen

MM Web

Zum Glück brauche ich, wenn ich Firefox benutze, nicht erst die Google-Toolbar installieren, um meine Suchwörter zu highlighten. Mache ich eine In-Site-Suche mit Firefox (Strg + F für find), dann kann ich auch dort die Suchwörter hervorheben lassen. Um die gesuchten Begriffe auf einer Seite mit ausführlichem Text zu finden, gibt es sowieso nichts besseres als den browsereigenen Suchdienst ;-)

Besserwisser

i think you should change the hilite color to something else because it's kind of hard to read the hilited words

dmitriy

Commenting is not available in this channel entry.