Monday, February 13, 2006

How did I miss Type-Ahead behaviour?

I have been doing some further work on my simple Google Suggest clone recently (I've not finished doing this yet, more on this another time). A colleague of mine brought the autocomplete or (type ahead) behaviour of Google Suggest to my attention. I have to admit that I'd never really noticed this before, it is so easy to take clever AJAX behaviour for granted (one of the reasons for AJAX's success is it just feels natural). Whilst trying to figure out how it works I tripped over a JavaScript feature that I never knew existed before. If you are viewing this as a standalone entry you will be able to see an example of it working below (fixed! I think my blog front page is too JavaScript laden for it to work there). The highlighting is achieved via JavaScript. JavaScript is also used to tell you what text is highlighted and what text is not highlighted. Here is the JavaScript.

The mechanism used (createTextRange/setSelectionRange) differs between IE and Firefox. Whilst investigating this I found the following references useful:

Google Suggest Dissected..., Creating an Autosuggest Textbox with JavaScript, Part 1 & Get Selection (from