Google Suggest beta. Just like Google search, except it "suggests" search terms as you type, sort of like auto-complete of URLs in the location field of most browsers. This is similar also to what Google did with the gmail UI. This completely blows my mind. How can they do that with HTML and javascript? I don't understand. Are they holding a connection open to the server? And doing a round trip after every character you type? Amazing. I know a little bit about this stuff and it seems like magic to me. (via kottke)
This /. comment explains the magic: The source for the page is quite simple; most of the work happens in a condensed JavaScript library [google.com]. Not easy reading (note the word "condensed" above, meaning function and variable names are 1 or 2 chars, and all extra whitespace was removed...), but it's actually pretty straightforward.
It disables your browser's autocomplete on that textfield (for obvious reasons). Then it basically just defines a hidden div for that auto-complete dropdown (variations on this depending on browser... frickin' incompatibilities).
Each time you type a character, it populates that div body with the results of a quick, tiny query back to Google. It's NOT running the search for you; it's hitting (I assume) a simple, probably totally in-memory list of the most popular searches and number of results. That's how it can be so quick a response -- the lookup on their end is super-minimal, and the data to be transferred is probably less than 1k each time.
Cool. Nice concept, nice execution. And one of those nice "only obvious in hindsight" additions. And here is the (obfuscated) javascript code. The code makes requests to a special google URL that returns the results. Here is a look at the data returned after 'jim' is typed into the google suggest field.
Now someone has completely un-compressed (un-obfuscated) the google javascript code so it's much easier to see how it is done. It is really hard to underestimate the importance of this (as well as the similar tricks they used with gmail.) This literally changes everything in terms of web applications (well, if you're really obsessed with web applications I guess.)
Here is the really great blog entry from Chris Justus who did the dissection. The heart of the matter is "[t]he XMLHTTP / XMLHttpRequest object to communicate back with a server and get new info / instructions without refreshing the page ... the new black of web development..."
The new black indeed.
God I've always hated messing with javascript, but this stuff google is doing makes it almost necessary.
Here's some background on the XMLHttpRequest Object.
And here is a framework (is that the right word? engine?) for making something like this work with PHP on the server side: The intent [of JPspan ] is to make building “sticky” DHTML or web-based XUL applications, where the user interface remains static (not reloaded) in the users web browser, while data can be fetched dynamically from a remote web server, in response to user events.
|
- jim 12-10-2004 6:49 pm
This /. comment explains the magic:
And here is the (obfuscated) javascript code. The code makes requests to a special google URL that returns the results. Here is a look at the data returned after 'jim' is typed into the google suggest field.- jim 12-11-2004 6:43 pm
Now someone has completely un-compressed (un-obfuscated) the google javascript code so it's much easier to see how it is done. It is really hard to underestimate the importance of this (as well as the similar tricks they used with gmail.) This literally changes everything in terms of web applications (well, if you're really obsessed with web applications I guess.)
Here is the really great blog entry from Chris Justus who did the dissection. The heart of the matter is "[t]he XMLHTTP / XMLHttpRequest object to communicate back with a server and get new info / instructions without refreshing the page ... the new black of web development..."
The new black indeed.
God I've always hated messing with javascript, but this stuff google is doing makes it almost necessary.
- jim 12-18-2004 5:58 pm
Here's some background on the XMLHttpRequest Object.
And here is a framework (is that the right word? engine?) for making something like this work with PHP on the server side:
- jim 12-18-2004 6:14 pm