Google AJAX API

  • tomrulez
  • Expert
  • Expert
  • User avatar
  • Posts: 571
  • Loc: England!!

Post 3+ Months Ago

Been a while since I posted on here...

Anyway I am currently designing a website and I am trying to implement the tutorial from the bottom of this page : http://code.google.com/edu/ajax/tutoria ... h-api.html

I have got everything working but I need the search results to clear once another search is ran, at the moment they just appear below the last results. I can't figure out how to get this to work, anyone got any ideas?

Also once the results are returned the url's are not 'clickable' (not sure if that's the correct word), at the moment they have to be copied into a address bar to work and I would like them so a user can just click the link. Does anyone know how I can do this? I have tried everything to get these two items working but they seem to be beyond me.

Cheers
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Looks like nobody ever answered you. I just took a look at the Google link and for some reason its a 404, I even tried to find it on their website and I am thinking it may be a mistake on their part. Finally found it using Way Back Machine.

Anyway did you ever resolve this? There is all sorts of example code on the page, the bottom part is using this code:

HTML Code: [ Select ]
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Print Search Results</title>
 
  <!-- google search api -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=internal-solution" type="text/javascript"></script>
 
  <!-- std apis -->
  <script src="http://www.google.com/uds/solutions/cscintro/stdlib.js" type="text/javascript"></script>
 
  <link href="http://www.google.com/uds/solutions/cscintro/stdlib.css" rel="stylesheet" type="text/css"/>
 
  <!-- base-styles for my demos -->
  <link href="base-styles.css" rel="stylesheet" type="text/css"/>
 
  <!-- main -->
  <script type="text/javascript">
    var gLog;
    var gSearch;
 
    function main() {
      gLog = new StdLog(document.getElementById("log"), "stdout");
      gSearch = new GwebSearch();
      gSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
      gSearch.setSearchCompleteCallback(null, searchComplete, [null]);
    }
 
    function startSearch() {
      var input = document.getElementById("input");
      if (input.value) {
        gLog.printLine("Search Results for: " + input.value);
        gSearch.execute(input.value);
      } else {
        gLog.printLine("*** Error. Enter a Search Term ***");
      }
    }
 
    function searchComplete() {
      if (gSearch.results && gSearch.results.length) {
       var i;
        for (i=0; i < gSearch.results.length; i++ ) {
         var result = gSearch.results[i];
         gLog.printLine(result.title + " @ " + result.url);
       }
       gLog.printLine("");
     } else {
       gLog.printLine("*** Error. No Search Results ***");
     }
   }
 
 </script>
</head>
<body onload="main()">
  <h1>Print Search Results</h1>
  <div class="input-box">
 
    <input type="text" id="input"/> <input type="button" value="search" onclick="startSearch()"/>
  </div>
  <div id="log">Loading...</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.   <title>Print Search Results</title>
  6.  
  7.   <!-- google search api -->
  8.   <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=internal-solution" type="text/javascript"></script>
  9.  
  10.   <!-- std apis -->
  11.   <script src="http://www.google.com/uds/solutions/cscintro/stdlib.js" type="text/javascript"></script>
  12.  
  13.   <link href="http://www.google.com/uds/solutions/cscintro/stdlib.css" rel="stylesheet" type="text/css"/>
  14.  
  15.   <!-- base-styles for my demos -->
  16.   <link href="base-styles.css" rel="stylesheet" type="text/css"/>
  17.  
  18.   <!-- main -->
  19.   <script type="text/javascript">
  20.     var gLog;
  21.     var gSearch;
  22.  
  23.     function main() {
  24.       gLog = new StdLog(document.getElementById("log"), "stdout");
  25.       gSearch = new GwebSearch();
  26.       gSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
  27.       gSearch.setSearchCompleteCallback(null, searchComplete, [null]);
  28.     }
  29.  
  30.     function startSearch() {
  31.       var input = document.getElementById("input");
  32.       if (input.value) {
  33.         gLog.printLine("Search Results for: " + input.value);
  34.         gSearch.execute(input.value);
  35.       } else {
  36.         gLog.printLine("*** Error. Enter a Search Term ***");
  37.       }
  38.     }
  39.  
  40.     function searchComplete() {
  41.       if (gSearch.results && gSearch.results.length) {
  42.        var i;
  43.         for (i=0; i < gSearch.results.length; i++ ) {
  44.          var result = gSearch.results[i];
  45.          gLog.printLine(result.title + " @ " + result.url);
  46.        }
  47.        gLog.printLine("");
  48.      } else {
  49.        gLog.printLine("*** Error. No Search Results ***");
  50.      }
  51.    }
  52.  
  53.  </script>
  54. </head>
  55. <body onload="main()">
  56.   <h1>Print Search Results</h1>
  57.   <div class="input-box">
  58.  
  59.     <input type="text" id="input"/> <input type="button" value="search" onclick="startSearch()"/>
  60.   </div>
  61.   <div id="log">Loading...</div>
  62. </body>
  63. </html>


Is that the one you tried to use? I am about to try it out, I am thinking the sort of results you are getting is probably from this line:

JAVASCRIPT Code: [ Select ]
gLog.printLine(result.title + " @ " + result.url);


If so it could for instance like this:

Quote:
Ozzu Webmaster Forum @ http://www.ozzu.com/


Sounding right? This looks fairly easy to change.

Okay I just did a test and I was fairly close to what I mentioned above. To get it to actually link you would just change the last javascript line I quoted to:

JAVASCRIPT Code: [ Select ]
gLog.printLine("<a href='" + result.url + "'>" + result.title + "</a>");


That instead will link the title's to the URLs returned. After each search if you want to clear the results you would edit the startSearch function and add the highlighted part below:

JAVASCRIPT Code: [ Select ]
        function startSearch() {
         gLog.clear();
          var input = document.getElementById("input");
          if (input.value) {
            gLog.printLine("Search Results for: " + input.value);
            gSearch.execute(input.value);
          } else {
            gLog.printLine("*** Error. Enter a Search Term ***");
          }
        }
  1.         function startSearch() {
  2.          gLog.clear();
  3.           var input = document.getElementById("input");
  4.           if (input.value) {
  5.             gLog.printLine("Search Results for: " + input.value);
  6.             gSearch.execute(input.value);
  7.           } else {
  8.             gLog.printLine("*** Error. Enter a Search Term ***");
  9.           }
  10.         }


I also added a bit of CSS to make the output look a bit easier on the eyes:

CSS Code: [ Select ]
    <style type="text/css">
      a {
         color:#aaaaaa;
      }
    </style>
  1.     <style type="text/css">
  2.       a {
  3.          color:#aaaaaa;
  4.       }
  5.     </style>


Overall the results look like this:

Attachments:
google-search-results-ss.jpg

The google search results from using the Google AJAX Search API example



After each search everything clears as well. Hope this helps, even though you asked for the help about a month ago.
  • tomrulez
  • Expert
  • Expert
  • User avatar
  • Posts: 571
  • Loc: England!!

Post 3+ Months Ago

Thanks, that is just what I was after. I will try it tomorrow and get back to you. Thanks again :)

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 49 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.