Google Search
This page shows the use of the jsRepeater with the Google AJAX Search API. JSON coming from that API is transformed, using the jsRepeater into HTML.
${estimatedResultCount} results found
${label} %{-|-|}
Below is the code that makes this possible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsRepeater Example - Google Websearch</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.1.2.6.js"></script>
<script type="text/javascript" src="jquery.jsrepeater.js"></script>
<script language='javascript'>
google.load("search", "1");
var searcher;
function Initialise(){
searcher = new google.search.WebSearch();
searcher.setNoHtmlGeneration();
searcher.setSearchCompleteCallback(this, display, [searcher] );
}
function display(results){
$('#SearchResults').show();
$('#SearchResults').fillTemplate(results);
}
function Search(query){
searcher.execute(query);
}
function gotoPage(page) {
searcher.gotoPage(parseInt(page));
}
</script>
</head>
<body onload='Initialise();'>
<form>
<input type='text' style="width:300px;" name='txtSearch' />
<button onclick='Search(this.form.txtSearch.value);return false;'>
Search</button>
</form>
<p> </p>
<!-- Template to use for search results -->
<div id='SearchResults' style="display: none;">
<div context='results'>
<div style="margin-top:10px;">
<a href='${url}' target='_blank'>${titleNoFormatting}</a><br />
${content}
</div>
</div>
<div context='cursor'>
<br /><br />
<em>${estimatedResultCount} results found</em>
<br /><br />
<span context='pages'>
<strong><a href='#' onclick="gotoPage('${label}');">${label}</a></strong> %{-|-|}
</span>
</div>
</div>
</body>
</html>
