Dr Nic

Auto-completer for my blog comments

It took 4 hours to return from the town of Strängnäs to Stockholm via train. Normally, its 40 minutes. The train never turned up. 4 * 60 – 40 = 200 minutes of non-travel.

Stuck in a train station for 200 minutes I tackled a problem that has irked me for some time.

In my blog comments, when I reply to someone else’s comment I’ll normally use the syntax: “@chris – thanks for the kind feedback, I’ll send the money via paypal“.

And then Chris says “@Dr Nic – yeah, send it to the usual account; the tax man will never find it“.

And then I say “@chris – no problem“.

Its not that “@chris” is difficult to spell, but I’ve used IRC and Gmail long enough that I like auto-completion. The absence of auto-completion in Skype irks me too.

What I really want is:

“@c” + TAB expands to “@chris – “

So that’s what I now have. And its neat.

Demo of auto-completer

Unfortunately, the first person to leave a comment below won’t have anyone to reply to, and so theoretically wouldn’t get to experience the joys of the feature, that is so awesome and sexy that my very own wife called:

“That’s nice dear, now help with dinner”.

So, by default “Nic”, “Dr Nic”, “drnic” are available. The 2nd commenter will get these + the name of the 1st commenter. The 3rd commenter will get… hehe, you thought I was going to type that out.

Here’s what you’ll see when you save your comments:

Testing Autocompleter

Public release

Its currently implemented for WordPress, using Prototype/Scriptaculous. Well it works on my WordPress theme. It figures out the auto-completion list from the HTML, not from the blog/forum server.

I’m not sure how different everyone’s HTML is for their comment blocks. That makes it tricky to release the conde at the moment for general consumption. You might be an HTML guru and make it work, but your sister isn’t.

So, can you please comment below (wink wink) with the name of your blog software, and include your blog url in the URL field. I might be asking for grief here, but I’ll scope out everyone’s blog comment HTML and see how different/similar they are.


If someone in the comments has already mentioned your blog software (WordPress, Mephisto, etc) then you MUST reply to their comment. If you are first to comment with your blog software, then use “@Dr Nic” instead.

This is life-or-death critical as it gives you an excuse to play with the auto-completer thingy. Lives are at stake here people!

Don’t have a blog, but want to comment anyway to play with it in all its snazziness? Go for gold.

Related posts:

  1. GitHub Badge for your Blog with 100% guarantee of more coolness The killer app for JavaScript in the 90s was...
  2. MagicCGI shows OpenID user count In the last 20 days, 43 people have used...
  3. Yehuda Katz starts a blog Yehuda is the creator of autoDB – the wonderful admin...
  4. [Trick] Live Version Numbers on your blog There isn’t much connecting your open source projects – written...

47 Responses to “Auto-completer for my blog comments”

  1. johan says:

    first post!

  2. Dr Nic says:

    @Dr Nic – bwahaha. I am first!

  3. Dr Nic says:

    @johan [via] – damn, wasn’t even first on my own blog.

  4. Paul Dix says:

    @Dr Nic [via] – That’s hawt

  5. AndyKram says:

    @Dr Nic [via] – You perpetually increase your hero rating in my book. Right now you’re DHH – 2. Any more amazing feats anytime soon could rank you at DHH – 1. Be careful, that much amazingness could have side effects.

    PS – The submit button doesn’t display in Firefox for me, so I had to IETab to IE in order to submit this comment ;) . The auto-complete, though, is still complete ownage.

  6. Herry says:

    Ah..this is revolutionary…really sweet. Btw, has some issues on IE 6, auto-complete doesn’t work, and Safari on Windows, submit button is missing too.

  7. Dr Nic says:

    @AndyKram [via] + @Herry [via] – I must have broken that whilst trying to fix a Safari bug (read: prototype.js bug). So I’ve reverted it back. Now Safari on OSX is broken, but everyone has a submit button.

  8. Steve Tooke says:

    @Dr Nic [via] – Very nice! Would be very neat for Mephisto – just need to write some more interesting stuff so people have something to comment about!

  9. Dr Nic says:

    @Steve Tooke [via] – do you know if mephisto templates have similar or widely different comment HTML?

  10. Dr Nic says:

    @Steve Tooke [via] – actually, looking at your blog theme, the HTML for each comment (not the textarea but the resulting display HTML for comments) is similar to my WordPress theme:

    <li id="comment-8" class="alt">
    			<cite><a href="http://theedgecase.com">Joe OBrien</a></cite>

    The <li> class is different, but the <cite> structure is the same.

  11. JoNtE says:

    @JoNtE Sweet!!

  12. piggy says:

    @johan this is a test

  13. piggy says:

    @piggy [via] – Sorry for the extra comment – I just think this is REALLY neat!

  14. Henrik N says:

    Cool hack. Perhaps add per-comment “reply” links that populate the comment box with “@person via – ” and scroll down to it?

  15. Henrik N says:

    Seems your time zone settings are off. Says “14:18 UTC”, but it’s currently 14:18 CEST.

  16. Dr Nic says:

    @Henrik [via] – “reply” is a nice idea. I guess it could be dynamically placed at the end of the comment <li> element (so that its generic for all blog templates that its applied to).

  17. Chris says:

    @Dr Nic: That money never arrived.

  18. Dr Nic says:

    @Henrik N [via] – new “reply” links now available. Thanks for the idea.

  19. David Parker says:

    @Dr Nic [via] – Pretty cool Dr Nic! Now should this link go to the most bottom comment from you or to the original link? Hmmm…

  20. jk says:

    @Dr Nic [via] –

  21. jk says:

    @jk [via] –
    test too

  22. Dr Nic says:

    @David Parker [via] – sorry, you mean the “via” link? Currently its pointing to the “reply” comment, or the latest comment from the person you auto-completed from. Should it do something different?

  23. Dr Nic says:

    @David Parker [via] – Ok, I noticed that some of the “via” urls had multiple “#comment-XXXX” values. I’ve cleaned these up and the code no longer generates them.

  24. jk says:

    @Henrik N [via] – good idea

  25. Peter Burns says:

    @Dr Nic [via] – I’m happily on WordPress as well, though I stole my theme.

    [I'm on Camino, which uses the Firefox's Gecko rendering engine. The submit button appears, but the autocomplete doesn't.]

  26. Dr Nic says:

    @Peter Burns [via] – in Camino it doesn’t appear to be doing anything at all. At least in Safari/WebKit the “reply” links are working.

    How do I debug Camino javascript? I’m not seeing any tools etc on Google.

  27. Robert says:

    @Nic, have you tried using Firebug Lite? – http://www.getfirebug.com/lite.html

  28. Dr Nic says:

    @Robert [via] – Its very cool. Now that you mention it I’ve retested the “reply” and “auto-complete” and it appears to be working for Camino now. Yipeee.

  29. @Dr Nic [via] – I’m using typo 4.1.1 for my blog which means that the blog commenting probably won’t work.

  30. Dr Nic says:

    @Rick DeNatale [via] – Looking at your HTML, I think it could be made to work for your template:

    <ol class="comment-list" id="commentList">
      <li id="comment-120">
      <cite><strong>Chui Tey</strong> </cite> said 6 days later:

    Here we’d find the comment <li> with $$('ol.comment-list li'), and the author names with $$('cite').first() inside that.

    Finally, your textarea is $(‘comment_body’) where as mine is $(‘comment’).

    Its different from mine, but basically the same and should be workable with some modifications.

  31. zapnap says:

    hrmm pretty cool stuff. thanks!

  32. Peter Krantz says:

    @Dr Nic [via] – This is very nice. From an accessibility perspective there are bit too many “via” links I guess. Maybe display of those could be a configuration option?

  33. Dr Nic says:

    @Peter Krantz [via] – hmm; can you think of a nicer way to represent the link back?

    Ultimately I want to use the link data as a model for comment threads. Hide the [via], and indent the comment somehow. Or have arrows pointing all over the place. I’m not sure how it will look.

  34. Martijn says:

    @Dr Nic [via] – That’s a cool idea. Thank you.

  35. Sam Nardoni says:

    @Dr Nic [via] – This is actually amazing

  36. Bob says:

    @Dr Nic – What about making the name the link instead of adding [via] everywhere?

  37. Dr Nic says:

    @Bob – sounds fair and looks ok. I’ll investigate updating the script later.

  38. Paul says:

    @Dr N

    I can’t figure out how to use this…It’s probably some stupid mistake, but what keys do I press and when for the autocomplete?

  39. Dr Nic says:

    @Paul [via] – yeah, it seems to be broken somehow. Haven’t had time to play/fix it lately, so I just use the “reply” links.

  40. feng says:

    You don’t have to register or login to comment, but it’s easier if you do so. We don’t censor comment based on your point of view but comments that are abusive, use excessive profanity, or contain off-topic links may get edited or deleted. On some posts, it may take up several minutes for you comment to show up.

  41. [...] in the url field. … Use this link to trackback from your own site. Comments. Leave a response …http://drnicwilliams.com/2007/06/30/autocompleter-for-blog-comments/Open finds, minds, conversations…: Kevin Anderson hired for …TrackBack url for this entry: [...]

  42. dizi izle says:

    On some posts, it may take up several minutes for you comment to show up.

  43. @johan this is a test

  44. hnjmycccthy says:

    3AdyFx qzczzipuwwco, [url=http://xgvarzyvnnfq.com/]xgvarzyvnnfq[/url], [link=http://hhzinhuqcpez.com/]hhzinhuqcpez[/link], http://ikrcresrnjww.com/

  45. Electronics says:

    Wow this seems like an awesome feature! Nice coding work there, I really do hope you release it to the public so other people can use it too (Including me, obviously) :)

  46. Rings says:

    Hmm. Does not seem to auto complete for me. I must be retarded. =\ Seems like a great idea though.

  47. Dr Nic says:

    @Rings – its a few years old, and embedding behaviour in a blog + demoing that way is a surefire way to have the behaviour break in the future :)

    I might rewrite it again one day for jQuery etc.