Yesterday, the subject of “static vs. dynamic websites” came up and an example of “something that requires dynamic page assembly” was search query term highlighting. In other words, using the HTTP Referer header (yes, it’s misspelled but that’s how it is in the spec) header and parsing it and if it’s a click-through from a search engine results page (SERP), using the search terms to highlight occurrences of them in the page.
I argued that while you could do this server-side, that this wasn’t necessary; it could be done client-side, too. In modern browsers, the “referer” (sic) information is available through JavaScript in the document.referrer (spelled correctly) variable. (NB: If you’re looking for document.referer, you’ll get frustrated. It’s actually spelled correctly in JS.)
As my suggestion to use JS and DHTML on the client-side wasn’t getting across, I decided to implement a quick proof-of-concept demo using jQuery, a fantastic JavaScript library that’s light on bytes but heavy on the features. Here’s a link to the demo:
Client-side query term highlighting demo using jQuery
Here’s the few lines of CSS and JS that makes it work:
It is really that simple. Now you see why I love jQuery.
Tags:
search,
highlighting,
web,
jQuery,
JavaScript,
DHTML
Latest comments