Search term highlighting

Posted on Monday, July 28th, 2008
Post image ('Search term highlighting')

This has been around for a while (Probably since the days when WEB 2.0 was still in fashion), but I’ve only seen it utilised on various forums and a few informational sites in the past. Even though most browsers’ "find" function is only a couple of keystrokes away (ctrl+F) I think this search-term highlighting thing is really great and makes it even easier for the user to read and navigate the content of your site!

It’s actually a very good idea and I am surprised at myself for not implementing it earlier on this blog. If you run a site with more than a couple of pages of content then you should definitely consider integrating this, especially if you run a blog. It’s one of those things that’s at the back of your mind, you’ve probably seen it utilised in the past and thought, "Oh, I’d better add that to my website to make it even more awesome…" - But, you never got around to adding it… Until now!

As far as I know, the best way to do this is with client-side scripting - we’re obviously talking about JavaScript here! There are tonnes of scripts available so I’m not going to bore you with my own jQuery rendition… But I am going to list some of the solutions available:

If you wanted to, you could write your own but there is no point in reinventing the wheel! If you don’t fancy any of the above scripts then head to Google and have fun! And don’t forget to post back here if you find an even better solution, be it Client or Server side.

This is not very advanced and it’s not exactly something to brag about, but it definitely enhances the user experience of your site!

Leave a Response

Allowed elements include: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <em> <i> <q cite=""> <strike> <strong>.
Please wrap any multi-line code snippets in the <pre> element. (Characters are automatically escaped this way) - also you can specify the language within the lang attribute, e.g. <pre lang="php">echo 'hello';</pre>. (Available languages: "php", "javascript", "html4strict")