Using AJAX Search to integrate search results into your site

MAR 19, 2007

Posted by Dion Almaer, Google Developer Programs

We are very fortunate at Google to have amazing people come in to speak to us on many interesting topics. We record these talks and make them available on Google Video.

We recently added a feature on the Google Code website that displays recent videos from our tech talk series.

You could do this directly using the Video Bar or the Video Search Control which have wizards to make implementation trivial.

In our case, we wanted to make the bottom right portlet fit in with the look and feel of the rest of the site, so we decided to go a little more low level.

The the AJAX Search API the actually act of searching happens in the Searchers set of JavaScript classes. We used the GvideoSearch class which extends the base GSearch functionality to work with Google Video.

The resulting code was simple. At its heart we:

Told the searcher to give us the most recent searches via videoSearch.setResultOrder(GSearch.ORDER_BY_DATE) (as opposed to the default 'most relevant' setting)
Told the searcher that we would handle generating the HTML ourselves via videoSearch.setNoHtmlGeneration()
Do the work of creating the HTML from the results after the results come back. We track this with videoSearch.setSearchCompleteCallback()

When the search returns the results are put into a results[] array. These results are GvideoResult JavaScript objects with properties that we can then query, such as the published date, content snippet, title, duration, video URL, and the thumbnail image.

We used this to dynamically create the HTML and then inserted it into the DOM with innerHTML.

var result =
      videoSearch.results[x];
var nicerDate = new Date();
nicerDate.setTime(Date.parse(result.published ));

var
      dateFormatted = (nicerDate.getMonth()+1) + '/' + nicerDate.getDate()
+ '/' +
      nicerDate.getFullYear();

output += '<div
      class="featured"><div class="project"><div '
+
      'class="screenshot"><a href="' + result.url
+ '"
      rel="nofollow"><img src="' + result.tbUrl + '" alt="'
+
      result.titleNoFormatting + ' Screenshot" width="129" height="110" '
+
      '/></a></div><div class="info"><div
      '
+ 'class="name"><a href="' + result.url + '"
      rel="nofollow">'
+ result.titleNoFormatting +
      '</a></div><div '
+ 'class="author
      videodateformat">Recorded on ' + dateFormatted
+
      '</div><div class="duration">Duration: '
+ parseInt(
      result.duration / 60) + ' mins</div></div><p '
+
      'class="videosnippet">' + result.content
+
      '</p></div></div>';

A bit ugly, I know. If we wanted a cleaner approach, we could have used DOM methods directly, or we could have created this using a JavaScript Template package.

What is important to know, is that the AJAX Search API is a powerful beast. On the one hand you can run a wizard and get results that you can copy and paste onto your web pages. On the other hand you can get low level and query the backend which returns simple JSON for you to manipulate.

The AJAX Search team seems to release something new on just about a weekly basis, so subscribe to the Google AJAX Search API Blog to follow along.