2010-09-27 8 views
0

J'utilise la simple API Google pour afficher les résultats de la recherche. Je voudrais obtenir la valeur href d'un lien sur mouseover ou cliquer. Ce n'est vraiment pas important quelle est la saveur de javascript utilisée, j'ai juste besoin d'obtenir la valeur href sélectionnée par l'utilisateur de la recherche rendue.Comment obtenir les résultats de l'API de recherche Google Valeurs href avec jquery

(je besoin de ce que j'ai un webservice qui permet aux utilisateurs d'enregistrer des liens qu'ils trouvent d'intérêt.)

Je suis horrible script côté client pour que je puisse vraiment utiliser une main. Avec l'exemple ici, j'utilise l'exemple de l'API de recherche Google AJAX par défaut.

To visually explain I have posted this image. (ne peut pas joindre)

J'ai utilisé le lien - How to get href value using jQuery? - pour référence simple, sans succès. Je crois que c'est en raison de l'ordre de rendu de façon/page que les résultats de recherche de google sont montrés.

La source html pré rendu est la suivante:

<!-- 
    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> 

Si quelqu'un peut me diriger dans la bonne direction, je voudrais vraiment l'apprécier. Merci à un million, Dave

Répondre

0

Je ne suis pas certain de la bibliothèque Google que vous utilisez - d'après ce que j'ai pu constater grâce à une recherche rapide, elle semble être obsolète. Vous pouvez créer un lien vers l'endroit d'où proviennent les échantillons.

Si vous voulez juste extraire le href sur click ou mouseover, vous pouvez le faire:

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

Il utilise le gestionnaire d'événements live() de jQuery pour joindre ce clic-gestionnaire à chaque élément <a> qui a la classe gs-title , même s'il est ajouté à la page plus tard (pour le faire sur mouseover, changez simplement le premier argument en mouseover au lieu de click). Le gestionnaire lui-même ne fait rien mais empêche l'action de clic par défaut (ainsi vous constaterez que les liens ne fonctionnent pas) et connecte le href à la console. Vous pouvez l'adapter à vos besoins.

+0

Merci. J'ai fini par utiliser silverlight pour rendre la sortie. Votre exemple fonctionne pour l'API Google dépréciée en utilisant Jquery. – DaveCS

+0

Assez sûr que la fonction 'live' a été depuis obsolète. IIRC, il a été intégré dans 'on' via un paramètre supplémentaire. – Carcigenicate

0

J'ai utilisé deux fichiers.

ajax.html

<html> 
<head> 
    <style> 
    #container 
    { 
    border:1px solid black; 
    height: 20px; 
    width: 230px; 
    background: #5CCCCC; 
    position: absolute; 
    color: white; 
    display: none; 

    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    </head> 
    <body> 
    <p>hello how are you?</p> 
    <p>Please run this file with localhost url only else it won't work</p> 
    <p>you can double click at any word to get the no of results</p> 
    <div id="container"></div> 

    <script> 
     var p = $('p'); 
     p.html(function(index, oldHtml) { 
     return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>') 
     }); 
     p.click(function(event) { 
     var x=event.pageX; 
     var y=event.pageY; 
     $("#container").css(
     { 
     "top":y+"px", 
     "left":x+"px" 

     }).fadeIn(500); 
     $("#container").text("Loading...."); 
     var a=event.target.innerHTML; 
     $("#container").load("index.php?str="+a+" #resultStats"); //Since number of results are saved in a id named resultStats,using that to filter the content.from google page. 
     }); 
    </script> 
</body> 
</html> 

Et un autre fichier est un fichier .php à partir de là je suis d'interroger le serveur google pour chercher nombre de résultats totaux.

index.php:

<?php 
    $str_to_search=$_REQUEST['str']; 
    $a=file_get_contents("http://www.google.com/search?q=define+". $str_to_search); 
    echo $a; 
?> 

Rappelez-vous exécuter les deux fichiers via le serveur php.

Questions connexes