More Dynamic Web Page Updating

I ran into Cite U Like on del.icio.us last week. It is a search and tagging tool for academic submissions, and that’s pretty cool.

But there’s also a dynamic search of the tagging space in a box on the right hand side. Simply enter some characters and the tag space will be trimmed down to match. At first I thought this was yet another Ajax application, but then I realized that it was way too responsive. So I took a quick look at the page source, and located the keystroke handling code. It turned out to be really simple — every time a key is pressed, iterate through the tags in the page’s DOM, and simply show only those that match. 13 lines of JavaScript is all it took to create that cool interactive behavior. This is done in function filter_tags in the page source, if you are curious (and you should be, if you are a web developer).

This model does have some limitations. You wouldn’t want to use it in situations where there were hundreds of thousands or millions of tags, since they all have to be present, in latent form, on the page. But that’s ok. Plenty of applications can benefit from a dynamic search over hundreds or thousands of items, and I look forward to seeing this technique used in other situations.