Auto complete comes of age

Google Suggest, the latest bag of tricks from Google Labs, is a perfect example of how modern web applications are breaking out of the mold and becoming more interactive. It uses XMLHttpRequest to run queries against Google as yout type, proving an auto-complete box with the most likely results. As you might expect from Google, it’s slick, intuitive and fits right in to their bare-bones interface.

The JavaScript that powers the feature is pretty well obfuscated, so if you want to see how it works your best bet is to install the Firefox/Mozilla Live HTTP Headers extension, set it up as a sidebar and watch what happens when you use the site. Basically, for every character you type it retrieves a page like this and evals the resulting string of JavaScript. It’s the same kind of technique they use for Gmail.

XMLHttpRequest is a technology with amazing potential, and this is just the tip of the iceburg. The web’s about to get a whole lot richer.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Dangermouse

    Thats pretty neat.

    How can they copyright javascript? Its not like auto complete is a new idea

  • Nicholas C. Zakas

    Don’t forget this oldie by goodie, posted right here at Sitepoint: http://www.sitepoint.com/article/life-autocomplete-textboxes. :)

  • http://simon.incutio.com/ Skunk

    They’re not copyrighting the concept of auto-complete, just their particular JavaScript file that implements it. That’s perfectly legal , and it means that should someone copy and paste that exact script for their own site Google could send in the lawyers (although I very much doubt that they would).

    A more interesting question is whether or not short scripts should be copyrightable – I’ve seen plenty of scripts on sites like the JavaScript Source which are only two or three lines but come with a lengthy copyright notice.

  • http://www.mission36teen.com M36Teen

    So, if I take it, and mod 3 lines, what happens? lol

    Cool though.

  • Andrew Wooster
  • Yousf

    Thats G R E A T!!!!
    I like it very much! I love you Google guys!
    but isn’t this a huge load on their servers?

  • dave

    This looks very similar to what I have been using for a while now, which is an adaptation of what I found at http://blog4.bitflux.ch/wiki/LiveSearch

    Nothing real new there, why on earth would they hide the js and copywrite it?

    But it is nice to have a major player upping the ante with respect to using javascript to enhance user interaction with the data on the page.

  • danut

    For other documentation please se other web links. It’s easy. Don’t worry . Look ta the links.
    [URL=http://www.my-best-jobs.com/advice%20resources/start%20business/index.php]Start own business[/URL]

  • michie

    Search companies such as Yahoo and MSN have been using XMLHTTPRequest on their sites before, so nothing really new here.

  • http://www.mission36teen.com M36Teen

    Cool, I needed that link! I’m not sure what that had to do with this, but I’m glad you posted it! ;)

  • Tom Morris

    The code has been stripped of comments, white space, and any extra characters, but I’d hardly call it obfuscated.

    One thing looking at the code shows is that there are lots of latent capabilities. For example, they seem to allow for both CSS and non-CSS as well as supporting browsers which don’t have support for XMLHttpRequest by setting a cookie and forcing a page refresh.

  • http://www.sanisoft.com tariquesani

    Take a look at jpspan http://jpspan.sf.net to effortlessly roll out something similar using php + js

  • http://www.phppatterns.com HarryF

    Interested to see they’re also using the approach of delivering a response which is eval()-able Javascript (**cough** ;)), rather than, say, XML. Makes a great way to pack data which is probably unique to Javascript, given that the browser JS runtime guarantees security.

  • Anonymous

    The php.net site had this functionality in the manual. This is over a year ago and was in beta, I don’t where it is now

  • http://arielladog.tripod.com Arielladog

    After aquiring the famed Oddpost, Yahoo now also has autocomplete. XMLHttpRequest via JS really is starting to finally show up in useful situations. However, to do an address lookup so quickly (assuming it’s not all cached) is pretty amazing.

  • http://www.realityedge.com.au mrsmiley

    They seem to be limiting its results somehow. I dont think it handles multiple words very well. For example, I search google normally for my business name “Reality Edge Media” and I come back as top listing. If I type it into the google auto complete box, I dont even rate a mention. Not even if you put quotes around it. Maybe only sites with a minimum PR are listed in the return set?

  • Ben

    Really why is this news? Becasue google did it? PHP.net did this ages ago (with an “obfuscated” script as well) http://simon.incutio.com/archive/2003/11/13/goodAndUgly

  • Jordan

    mrsmiley, the suggestions it gives you aren’t sites, they’re queries. They’re not sorted by PageRank like regular Google search results — rather, I think they’re sorted by frequency queried. That is, the suggestions that pop up are the most frequently searched-for terms that begin with whatever you’ve typed in. Since you’re probably one of the only people out there searching for “Reality Edge Media”, it doesn’t show up.

  • andre

    i don’t think it’s gonna be much load on their servers. web servers, yes, but they’ve got thousands of them anyway :P for sure they’ve got a cache that answers all these search queries

  • pb

    Could Sitepoint or someone *please* do an article in *plain* english about how to in a cross-platform fashion do the httpxmlrequest + dhtml + javascript to make GETs/POSTs and parse/display the results in the browser? The information to date on this is sorely, sorely lacking.

  • http://www.fantasygaa.ie jb007irl

    Type in “www.” (without the quotes) and guess what pops up as the first suggestion?

    It’s http://www.yahoo.com! I would have thought http://www.google.com comes before http://www.yahoo.com (alphabetically).

  • Larry

    It’s not the copyright I would worry about, it would be a potential patent they could have filed that no one knows about yet.

    The combination of using xmpHTTPRequest along with auto complete and a dropdown box may have never been documented or done before.

    With a bit of time it is possible to work with their code and adapt it for other useful things.

    I had a page that used xmlHTTPRequest for auto complete but I didn’t have a dropdown box. I took their code and adapted it for what I was doing, but they still have bugs in it (it’s only a beta) and I didn’t like the way it’s coded (possibly for other future uses). I’m now writing a “clean room” version of this code to duplicate the functionality, but I still will have to worry about patent problems.

    Companies like Google patent this kind of stuff, not so they can keep other competitors from duplicating their technology, but to have something to trade if another competitor accuses Google of violating their patents. This keep us small developers from being able to compete, which is exactly the opposite of why patents laws were established in the first place.

  • Richard@Home

    They can’t copyright ‘The combination of using xmpHTTPRequest along with auto complete and a dropdown box’ as they aren’t the first to implement it.

    I’ve seen it on a couple of blogs over the last year or so.

    Here’s one example: http://blog.bitflux.ch/archive/spotlight_like_livesearch_added.html

  • gdape

    however you look at it copyrighting code is evil, which flies in the face of their mantra. The suits have arrived at the googleplex.

  • Dr Livingston

    Completely pointless patenting a peice of client side javascript, regardless of what it achieves – it’s in the users cache.

    As for the ‘wow’ factor it’s no bad though not new either. Good to see xmlHttpRefresh being taken up as it, to me anyways, is a technology to combat Flash 8)

  • Larry

    I looked at the example that Richard linked to and it does not do auto complete.

    It is also important to understand the difference between Copyright and Patent law. The Copyright of script, prevents me from copying it, but does not prevent me from using the concepts. A patent on the concepts (“means” in patent law) for the script prevent me from developing my own version, even if I hadn’t seen this one before.

    Going back to the example that Richard linked to; Google wouldn’t be able to patent using XMLHTTP with a drop down and a partial match list because the example could be used as prior art. They could however add the auto complete function to their patent filing and then we couldn’t use a similar function without some licensing deal with them or finding a different method to do it.

    The sad part about patent law is we don’t know if they have already filed for a patent for this and if someone duplicates it they could end up owing a lot of money to them unless they have some patent they would like to cross license, or money to invest.

  • Dorsey

    After an author has spent many hours/days/weeks/months designing, developing, testing, and releasing code, someone thinks copyrighting it to protect the author’s intellectual property is ‘evil’? It’s been well established, at least in the U.S., that software is copyrightable and belongs to the author, just as any other written work such as plays, music, poetry, etc. does, and no one questions the copyright of those.

    I’m all for open source because of the community behind it, and because I try to add my two bits whenever I can as a way of giving something back. Pirating non-open source code without the author’s permission is taking food from his/her mouth.

  • LOGIKonline

    Seems pointless to copyright a technology that is not even new to the web. It is actually about 2 years behind other companies doing the same thing. Not nearly as nice scripting. dbCombo.net for all of you not aware.

  • Gavi Narra

    I created a dictionary using the same technique as Google Suggest. The backend is SQL server. There is also a “how does it work?” section with complete source code.

    http://www.objectgraph.com/dictionary

  • Hank Fay

    I created a website using Javascript and a hidden frame to do roundtrips and then called a friend at a top-50 to look at it; he couldn’t see anything. Turns out their firewall strips all script. I stopped thinking of page-embedded script as a solution.

  • Brad Williams

    How is XMLHttpRequest any better than using hidden Iframe as people have been doing for years to retrieve data in background?

    http://www.ashleyit.com/rs/

  • http://www.customtailoredsolutions.com TaylorAtCTS

    Very interesting… thanks guys

  • moltar

    Gavi Narra: that dictionary looks really cool!

  • Dat Nguyen

    Question:

    Does XMLHttpRequest have the same limitations as Microsoft.XMLHttp? I was using Microsoft.XMLHttp for remote script callbacks, but I discovered that it can only send at most two requests to a server at the same time. Any new http requests are blocked until any previous requests are completed, even in asynchronous mode. I just assumed XMLHttpRequest is the same way. Does someone know if this is true?

  • Ben Balbo

    Just a comment to everyone who’s so against copyrighting… a copyright is implicit. They wrote it, so they have copyright. It’s nothing like software patents.

    If you write anything, it’s your copyright. It becomes your copyright on creation. If I write anything – it’s my copyright. Unless I post a comment on a web site, in which case I may be giving my copyright to the publisher/owner of the site :-)

    (c)2005, Ben Balbo, where applicable

  • http://www.ideasfreelance.com manoloweb

    http://manoloweb.blogspot.com/2005/03/instant-editor.html
    This is a field editor I just wrote, it is only an idea, I believe many users will find an ocean of possibilities around it :-)

  • 제일페차

    main1

  • Anonymous

    One of the greatest features about Firefox is the fact that anyone can write an extension to improve its functionality.

  • Anonymous

    is there any way to get the browser cache which pops up (autocomplete) when you re-enter the values in page. where you already entered?

    i am manually writing an auto complete feature for text boxes. I need a mechanism to cache the values when user does submit and populating those values in auto complete(i am including some constant values also), if they re-visit the same page in same session.

  • dan