Home/ Questions/Q 4086982
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T18:47:51+00:00

I am using the simple Google API to display search results. I would like

  • 0

I am using the simple Google API to display search results. I would like to get the href value of a link on mouseover or click. It is really not important what flavor of javascript is used, I just need to get the user selected href value of the rendered search.

(I need this as I have a webservice that allows users to save links they find of interest.)

I am horrible at client side scripting so I could really use a hand. With the example here I using the default Google AJAX Search API Sample.

To visually explain I have posted this image. (cannot attach)

I have used the link –
How to get href value using jQuery? – for simple reference to no avail. I believe it is due to the way/page render order that the google search results are displayed.

The html source pre render is as follows:

    <!--
  copyright (c) 2009 Google inc.
  You are free to copy and use this sample.
  License can be found here: code.google.com/apis/ajaxsearch/faq/#license
-->
<!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>Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
    <script type="text/javascript">
    /*
    *  How to do a search that returns the max number of results per page.
    */
    google.load('search', '1');
    function OnLoad() {

      // create a search control
      var searchControl = new google.search.SearchControl();

      // Set the Search Control to get the most number of results
      searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);

      // Create 2 searchers and add them to the control
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.BlogSearch());

      // Set the options to draw the control in tabbed mode
      var drawOptions = new google.search.DrawOptions();
      drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);

      // Draw the control onto the page
      searchControl.draw(document.getElementById("content"), drawOptions);

      // Search!
      searchControl.execute("Subaru STI");
    }
    google.setOnLoadCallback(OnLoad);

    </script>

  </head>
  <body style="font-family: Arial;border: 0 none;">

    <div id="content">Loading...</div>

  </body>
</html>

The relevent rendered result html source is as follows: 


     <div class="gs-webResult gs-result">
                        <div class="gs-title">
                            <a class="gs-title" href="http://en.wikipedia.org/wiki/Subaru_Impreza_WRX_STI" target="_blank">
                            <b>Subaru</b> Impreza WRX <b>STI</b> - Wikipedia, the free encyclopedia</a></div>

If anyone can point me in the right direction I would really appreciate it.
Thanks a million, Dave

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not quite certain about the Google library that you’re using – from what I could tell from a quick search it seems to be deprecated. You might want to link to where you’re getting the samples from.

    If you just want to extract the href on click or mouseover, you might do this:

    $('a.gs-title').live('click', function(e){
        e.preventDefault();
        console.log('clicked', $(this).attr('href'));
    });

    This uses jQuery’s live() event handler to attach this click-handler to every <a> element that has the class gs-title, even if it gets added to the page later (to do it on mouseover, simply change the first argument to mouseover instead of click). The handler itself does nothing but prevent the default click action (so you’ll find that the links do not work) and log the href to the console. You can adapt it to your requirements.

    • 0