Strategies for auto completing a text box with ajax

Question

How does youtube, google, facebook and even Stackoverflow achieve great performance with their auto-comlete boxes? It's really fast and feels like its a local search even though in the background they are probably calling a DB. (Imagine all the resources needed for a DB call!)

Is it ALL about Server and bandwidth?

What are the strategies to maximise performanace with this techique? Looking for anwsers such as
1) Start a ajax callback after a user types in at least 3 letters
2) Cache DB results? if so how?
3) pre-load data? if so how
4) etc...

If it matters im using asp.net mvc with sql server 2008.

Answer 1

Try and use Firebug to see what happens with google callbacks, it's impressive and explanatory.

Answer 2

Use it only for queries you can cache (look up a DB caching technology you can use for your server sided language/architecture and DB (e.g. memcached)... don't have any experience with MS technologies there) and that are fast (e.g. when searching for an article search only the title instead of the whole text... that's what advanced searches are for). If possible you should optimize your DB for these calls, too (indexing). Limit the results of course (my guess is that the time of Transferring all the data (request response) takes way longer than the DB query itself).

Answer 3

Some queries naturally get faster (and can use client side caching). This applies to any queries where as the "keyword" grows, the results are always a sub-set of the previous results.

e.g. Say you are looking for a contact to email... (of 8,000 contacts)

Typed   | Results | Search | Cached?
  "j"   |  2,500  | server | server
  "je"  |    847  | server | server (+ client?)
  "jef" |    192  | server | server + client
  "jeff"|     23  | client | client

You'd have to determine the best time/place to cache results but once you have a "small" set (e.g. less than 250) you might as well search a cache on the client.