Note: If you don’t know what google suggest is all about, I recommend you visit http://www.google.com/webhp?complete=1&hl=en before reading this article. I am not getting into code level as the Google code is copyrighted.
The answer to this is AJAX. Yes, Google suggest is using AJAX for getting suggestions from the server and displaying it. This kind of auto-filling feature is becoming a standard these days with the help of AJAX. Let’s see now what’s happening when we type in search text box of Google suggest. This is a very good example for responsiveness and rich client side application with AJAX.
For this discussion I am not considering the backend.
1. When page loads up, Google sets up the environment, like creating XMLHTTPRequest object, creating an empty div in the page for displaying suggestions. Here the X and Y coordinates and width of the search box are calculated and using these, div’s top, left, width style coordinates are set so that suggestions layer displays appropriately in alignment with search box. Here is the code to calculate X and Y coordinates. This is not Google code, I found this in: http://www.quirksmode.org/js/findpos.html
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
2. When user types in the search text of Google suggest’s search box, an asynchronous request will be sent to the server. The url for this is http://www.google.com/complete/search?hl=en&js=true&qu=pavan where qu denotes the suggest query term.
3. As you type, the query term differs and Google suggest gets the new information for auto-filling. I did a test on how fast it’s sending and getting the request for the fast typist. Look at the following URLs that are fired when I continuously type the search term. The whole search term I typed is “how google suggest is working”.
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=H |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=How%20 |
| Aborted | http://www.google.com/complete/search?hl=en&js=true&qu=How%20goo |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=How%20googl |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20s |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20sug |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20sugges |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20suggest%20 |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20suggest%20is |
| Aborted | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20suggest%20is%20w |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20suggest%20is%20work |
| 200 | http://www.google.com/complete/search?hl=en&js=true&qu=how%20google%20suggest%20is%20working |
4. If you observe, it’s aborting certain requests based on how fast you type.
5. The result of these HTTP requests are a simple string. For example for the first URL in the list, the response from the server is:
sendRPCDone(frameElement, "H", new Array("hotmail", "hotmail.com", "home depot", "http", "hp", "holiday inn", "honda", "horoscopes", "harry potter", "hsbc"), new Array("46,000,000 results", "1 result", "7,270,000 results", "1,370,000,000 results", "165,000,000 results", "14,600,000 results", "36,600,000 results", "8,020,000 results", "12,500,000 results", "3,430,000 results"), new Array(""));
6. If you observe, it’s nothing but a call to Javascript function (i.e., sendRPCDone ), reference to the DIV/IFrame element and suggestions in an array format but in a string format and this string can be “eval”ed in Javascript to call the function.
7. It then takes these arrays and construct a series of DIVs, SPANs and includes these DIVs and SPANs in the main suggestions DIV that was created at the page load. That’s when you see the suggestions coming up.
Just to add: Google has implemented Google suggest in the latest beta version tool bar. This also hits the server using HTTP and the URL is a little different. URL for getting suggestions for toolbar is: http://toolbarqueries.google.com/complete/search?q=google&output=toolbar&hl=en and the response is also different from the above. For this toolbar version, the response is in XML. The following is the sample XML for this.
<toplevel>
<completesuggestion><suggestion data="google.com"><num_queries int="1"></completesuggestion>
<completesuggestion><suggestion data="google toolbar"><num_queries int="3170000"></completesuggestion>
<completesuggestion><suggestion data="google maps"><num_queries int="6890000"></completesuggestion>
<completesuggestion><suggestion data="google scholar"><num_queries int="2210000"></completesuggestion>
<completesuggestion><suggestion data="google mail"><num_queries int="20600000"></completesuggestion>
<completesuggestion><suggestion data="google images"><num_queries int="21500000"></completesuggestion>
<completesuggestion><suggestion data="google tool bar"><num_queries int="3460000"></completesuggestion>
<completesuggestion><suggestion data="google map"><num_queries int="10500000"></completesuggestion>
<completesuggestion><suggestion data="google uk"><num_queries int="16300000"></completesuggestion>
<completesuggestion><suggestion data="google email"><num_queries int="20900000"></completesuggestion>
</toplevel>
