search,page,google,ajax,search,api,dhtml

rou1988 8/7/2016 0

A simple search page using Google AJAX Search API, and some DHTML

Html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>My Cool'n'Simple Search Page</title>
</head>
<body>
    <h1>My Cool'n'Simple Search Page</h1>
</body>
</html> 
Html
 <div id="queryContainer">
    <input type="text" name="query" id="query" />
</div>
<div id="searchcontrol"></div><br />
<div id="branding">Powered by Google</div> 
CSS
 <style type="text/css">
body
{
    font-family: verdana;
    text-align: center;
}
#queryContainer
{
    margin-bottom:2em;
    width: 80%;
    margin-left:auto;
    margin-right:auto;
}
#query
{
    border:1px solid silver;
    width: 100%;
}
#searchcontrol
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
.gsc-control 
{ 
    width: 100%; 
}
</style> 
Html
 <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" 
      rel="stylesheet" />
<script type="text/javascript" 
   src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=YOUR_KEY">
</script> 
JavaScript
 var searchControl window.onload = function() {
    onLoad();
}
function onLoad() {
    // Create a search control
    searchControl = new GSearchControl();

    // add a regular web search, with a custom label 'web'
    var webSrearch = new GwebSearch();
    webSrearch.setUserDefinedLabel("web");
    searchControl.addSearcher(webSrearch);

    // add a site-limited web search, with a custom label
    var siteSearch = new GwebSearch();
    siteSearch.setUserDefinedLabel("KenEgozi.com");
    siteSearch.setSiteRestriction("kenegozi.com");
    searchControl.addSearcher(siteSearch);
                
    // add a blog search, with a custom label
    var blogsSrearch = new GblogSearch();
    blogsSrearch.setUserDefinedLabel("weblogs");
    searchControl.addSearcher(blogsSrearch);

    // setting the draw mode for the Google search
    var drawOptions = new GdrawOptions();
    // use tabbed view
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
    // set the input field (instead of the default one)
    drawOptions.setInput(document.getElementById('query'));
    // actually write the needed markup to the page
    searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
    // set the google logo container
    GSearch.getBranding(document.getElementById("branding"));
}    
JavaScript
 var query = null;
document.onkeydown = function(event) { kd(event); };
function kd(e) {
    // make it work on FF and IE
    if (!e) e = event;
    // use ESC to clear the search results
    if (e.keyCode == 27)
        searchControl.clearAllResults();
    // get the input field
    if (query == null)
        query = document.getElementById('query');
    // and move the focus in there
    query.focus();
} 

Report Bug

Please Login to Report Bug

Reported Bugs

Comments

Please Login to Comment

Comments