Question

我正在尝试合并一个代码，该代码允许我将一个类分配给一个＆＃34; hoverme＆＃34;然后，一旦用户将鼠标悬停在该单元格上，它就会执行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。

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

在悬停中显示来自Google图片搜索的数据属性的图片

1 个答案: