As the RedesignGoogle gallery has continued to grow, we’ve been working on ways to make our tools more flexible for designers and more compelling for users. So far, RedesignGoogle has only allowed designers to modify the style sheet of the Google results page, but we’re taking that a huge step further: designers can now embed JavaScript in the page, and the truly excellent jQuery library is included in the add-on. Rather than simply reskinning Google results, designers now have the power to remake every aspect of the user experience, and we’re excited about the possibilities this opens up.

Below are a couple of simple examples (and code snippets) of what Google redesigners can create with jQuery. But first, a quick note about the RedesignGoogle competition: over the last couple of months, we’ve been running a contest to find the best user-submitted design and award the designer a MacBook Air. To make sure entrants get to make the most of the new features, we’re extending the contest deadline to January 1, 2010, and we’ll announce the winner two weeks later. You can read the full rules here.

Infinite Scroll

It makes a lot of sense for Google to only load ten results at a time — the fewer results are loaded, the faster your search — but there’s not a whole lot of sense to the way they force you to click through results pages. More than anything, it’s a vestige of last-century web design that no one’s bothered to change. What if instead of needing to click “next” to go to a separate second page results, the second group of ten results simply loaded in place when you scrolled down to the bottom of the page?

First, you need some code to detect when the user has reached the bottom, as well as a div to load the new results into:

$(document).ready(function() {
  $(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
      loadMore();
    }
  });

  start = 0;

  $('<div id="tempresults" class="moreloaded"></div>').insertAfter("#res");
});

The code above calls the loadMore() function when the user scrolls to the bottom of the page. It also appends a new div to the results section, and initializes a global variable, “start”, which will come into play later on.

Here’s what loadMore() looks like:

function loadMore() {
  start += 10;
  var nextlink = $("#nav tr td:last a").attr('href');
  var currenturl = window.location;
  url = currenturl + '&start=' + start;
  $("#tempresults").load(url + ' #res');
  $("#tempresults").attr('id', 'oldtemp');
  $('<div id="tempresults" class="moreloaded"></div>').insertAfter(".moreloaded:last");
}

The function begins by incrementing the “start” variable by 10; the variable signifies how many results have been loaded already. The results are loaded into the tempresults div via an AJAX request, and a new tempresults div is created.

You can see infinite scroll in action by installing this design.

Find As You Type

We thought it would be cool if Google updated its results as you type, the same way that, say, iTunes does. This design will do exactly that. It works by binding two functions to the “focus” and “keypress” events on the search field:

$(".lst").bind("focus", function(e){
  var currentTime = new Date();
  thisKeystroke = currentTime.getTime();
});

$(".lst").bind("keypress", function(e){
  var currentTime = new Date();
  lastKeystroke = thisKeystroke;
  thisKeystroke = currentTime.getTime();
  timeSinceLast = thisKeystroke - lastKeystroke;
  if (timeSinceLast < 600 && searchEvent != null) {
    clearTimeout(searchEvent);
  }
  searchEvent = setTimeout("updateResults();", 600);
});

Basically, every time you enter or delete a character in the search field, the search function, updateResults(), will be told to execute in 600 milliseconds. If you press another key before the search executes, the search is canceled and a new search is scheduled. We need this to make sure we don’t send too many search requests — sending lots of requests per second will make Google think you’re an automated search robot, and it’ll temporarily shut off service.

updateResults() is pretty simple:

function updateResults() {
  var url = '/search?' + $('#tsf').serialize();
  $.get(
    url,
    {},
    function(data, textStatus) {
      $("#res").replaceWith($("#res", data));
    }
  );
}

This function uses jQuery’s built-in AJAX and form serialization tools to execute a search and insert the new results into the page.

Hopefully these examples demonstrate how easy it is to make major changes to Google’s search interaction with just a few lines of code. We’re really looking forward to seeing what the community can come up with. If you need help with the details, check out the jQuery docs. Happy coding!