悬停显示来自谷歌图像搜索的数据属性的图像答案

【问题标题】：On hover show image from data attribute from google image search悬停显示来自谷歌图像搜索的数据属性的图像
【发布时间】：2014-05-22 14:47:44
【问题描述】：

我正在尝试合并一个代码，该代码允许我将一个类分配给一个“hoverme”表，然后一旦用户将鼠标悬停在该单元格上，它就会执行 ajax 查询以使用带有信息的数据属性存储在那里到谷歌搜索。

这是一个模拟表：

<table>
<thead>
    <tr><td>Test</td><td>Name</td></tr>
</thead>
<tbody>
    <tr><td data-info="Samsung NP200A5B" class="hoverme">ABC123</td><td>Test Name</td>   </tr>
</tbody>
</table>

一旦用户将鼠标悬停在名称 abc123 上，它应该会在其上方显示一个图片，其中包含数据信息标签中的内容。

我不确定 jquery 将如何工作，也不知道这是否会工作，因为一切都是从 MySQL 数据库生成的。

这是我的 php 代码：

<?php 

        $qry = "SELECT * FROM `assets` WHERE cust_id='$custID'";
        $rs = mysqli_query($mysqli,$qry) or die("Error: ".mysqli_error($mysqli));
        if(mysqli_num_rows($rs) > 0)
        while($rowa = mysqli_fetch_array($rs)) {
        echo '
    <tr>
        <td>'.$rowa['asset_tag'].'</td>
        <td>'.ucwords ($rowa['type']).'</td>
        <td>'.ucwords ($rowa['vendor']).'</td>
        <td>'.ucwords ($rowa['model']).'</td>
        <td>'.ucwords ($rowa['platform']).'</td>
        <td>'.ucwords ($rowa['location']).'</td>
        <td>'.ucwords ($rowa['status']).'</td>
        <td>'.ucwords ($rowa['user']).'</td>
        <td><a data-toggle="modal" href="#myModal" id="'.$rowa['id'].'">View</a></td>
        <td><a href="editasset.php?assetID='.$rowa['id'].'">Edit</a></td>
        <td>'?> <?php if($rowa['del_flag'] == 0){ echo' <a href="'.$_SERVER['PHP_SELF'].'?del=1&amp;assetID='.$rowa['id'].'&amp;asset_tag='.$rowa['asset_tag'].'" name="setDelete" id="'.$rowa['id'].'">Delete</a>'; }else{ echo '<a href="'.$_SERVER['PHP_SELF'].'?undoDEL=1&amp;assetID='.$rowa['id'].'&amp;asset_tag='.$rowa['asset_tag'].'" name="undoDel" id="'.$rowa['id'].'">Undo Delete</a>'; }?> <?php echo '</td>
        <td><a href="javascript: void(0)" onclick="window.open(\'qrcode.php?EID='.$rowa['id'].'\',\'width=300, height=300\'); return false;"><span class="glyphicon glyphicon-qrcode"></span></a></td>
    </tr>'.PHP_EOL;
        }else
            echo "
        <tr>
            <td>No assets found</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr> ".PHP_EOL;
        ?>

我应该提到的最后一件事是我正在使用 Jquery 的 DataTable。

【问题讨论】：

您可能需要阅读 Google 的条款和条件，了解您是否可以合法地实际执行此操作。我怀疑不是。
我刚刚检查了他们的条款和条件，没有什么说我不能使用 Ajax 调用进行搜索...
不是方法本身，更多的是在你自己的网站上使用谷歌的数据。
我不就是在做这样的事情吗？developers.google.com/web-search/docs
是的。现在阅读菜单中只有几个链接的页面，标题为“条款”：developers.google.com/web-search/terms

标签： php jquery html mysql ajax

【解决方案1】：

这可以通过 Google 图片搜索 API，但有每日使用限制（或每 100 次搜索支付 5 美元）。

见：https://developers.google.com/image-search/

即使使用此 API，您也无法确保搜索到的每张图片都与您希望在页面中显示的图片匹配。

示例 API：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Search API Sample</title>
    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load('search', '1');

      var imageSearch;

      function addPaginationLinks() {

        // To paginate search results, use the cursor function.
        var cursor = imageSearch.cursor;
        var curPage = cursor.currentPageIndex; // check what page the app is on
        var pagesDiv = document.createElement('div');
        for (var i = 0; i < cursor.pages.length; i++) {
          var page = cursor.pages[i];
          if (curPage == i) { 

          // If we are on the current page, then don't make a link.
            var label = document.createTextNode(' ' + page.label + ' ');
            pagesDiv.appendChild(label);
          } else {

            // Create links to other pages using gotoPage() on the searcher.
            var link = document.createElement('a');
            link.href="/image-search/v1/javascript:imageSearch.gotoPage("+i+');';
            link.innerHTML = page.label;
            link.style.marginRight = '2px';
            pagesDiv.appendChild(link);
          }
        }

        var contentDiv = document.getElementById('content');
        contentDiv.appendChild(pagesDiv);
      }

      function searchComplete() {

        // Check that we got results
        if (imageSearch.results && imageSearch.results.length > 0) {

          // Grab our content div, clear it.
          var contentDiv = document.getElementById('content');
          contentDiv.innerHTML = '';

          // Loop through our results, printing them to the page.
          var results = imageSearch.results;
          for (var i = 0; i < results.length; i++) {
            // For each result write it's title and image to the screen
            var result = results[i];
            var imgContainer = document.createElement('div');
            var title = document.createElement('div');

            // We use titleNoFormatting so that no HTML tags are left in the 
            // title
            title.innerHTML = result.titleNoFormatting;
            var newImg = document.createElement('img');

            // There is also a result.url property which has the escaped version
            newImg.src="/image-search/v1/result.tbUrl;"
            imgContainer.appendChild(title);
            imgContainer.appendChild(newImg);

            // Put our title + image in the content
            contentDiv.appendChild(imgContainer);
          }

          // Now add links to additional pages of search results.
          addPaginationLinks(imageSearch);
        }
      }

      function OnLoad() {

        // Create an Image Search instance.
        imageSearch = new google.search.ImageSearch();

        // Set searchComplete as the callback function when a search is 
        // complete.  The imageSearch object will have results in it.
        imageSearch.setSearchCompleteCallback(this, searchComplete, null);

        // Find me a beautiful car.
        imageSearch.execute("Subaru STI");

        // Include the required Google branding
        google.search.Search.getBranding('branding');
      }
      google.setOnLoadCallback(OnLoad);
    </script>

  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="branding"  style="float: left;"></div><br />
    <div id="content">Loading...</div>
  </body>
</html>

【讨论】：