2014-03-06 34 views

回答

2

開始與REST API的地方就在這裏:https://developers.google.com/custom-search/json-api/v1/introduction

例子:

<div id="content"></div> 
<script> 

    // Remember to replace YOUR_API_KEY below. 

    function hndlr(response) { 
     for (var i = 0; i < response.items.length; i++) { 
     var item = response.items[i]; 
     // in production code, item.htmlTitle should have the HTML entities escaped. 
     document.getElementById("content").innerHTML += "<br>" + item.htmlTitle; 
     } 
    } 
</script> 
<script src="https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=017576662512468239146:omuauf_lfve&q=cars&callback=hndlr"> 
</script> 

這裏有一個小提琴:http://jsfiddle.net/AGjCH/

+0

什麼是CX屬性?我應該改變它來匹配我的項目嗎? –

+1

這是您的引擎的ID,您可以在控制面板google.com/cse中找到它 – Devnook

1

我知道這是一個老問題,但這裏是我做過什麼,使格式化像谷歌網站搜索的API結果中使用的,因爲給他們結束了支付賬戶,將有廣告。 API方式可以選擇每天支付超過100次的搜索量,所以要繼續這樣做,但仍然需要格式化結果,並使用現有的結構來構建CSS以執行類似的樣式。

搜索表單到這個頁面是一個簡單的:

<form action="search-results.htm" id="cse-search-box"> 
     <div> 
      <input class="" name="q" type="text"> 
      <input class="" type="submit"> 
     </div> 
    </form> 

,然後在搜索結果頁面:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>JSON/Atom Custom Search API Example</title> 
    <!--<link href="default.css" rel="stylesheet" type="text/css">--> 
    <link href="google.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div class="gsc-result-info" id="resInfo-0"></div> 
    <hr/> 
    <div id="googleContent"></div> 

<script> 
    //Handler for response from google. 
    function hndlr(response) { 
     if (response.items == null) { 
      //Sometimes there is a strange thing with the results where it says there are 34 results/4 pages, but when you click through to 3 then there is only 30, so page 4 is invalid now. 
      //So if we get to the invalid one, send them back a page. 
      window.location.replace("searchresults.htm?start=" + (start - 10) + "&q=" + query); 
      return; 
     } 
     //Search results load time 
     document.getElementById("resInfo-0").innerHTML = "About " + response.searchInformation.formattedTotalResults + " results (" + response.searchInformation.formattedSearchTime + " seconds)"; 
     //Clear the div first, CMS is inserting a space for some reason. 
     document.getElementById("googleContent").innerHTML = ""; 
     //Loop through each item in search results 
     for (var i = 0; i < response.items.length; i++) { 
      var item = response.items[i]; 
      var content = ""; 

      content += "<div class='gs-webResult gs-result'>" + 
       "<table class='gsc-table-result'><tbody><tr>"; 
      //Thumbnail image 
      if (item.pagemap.cse_thumbnail != null) 
       content += "<td class='gsc-table-cell-thumbnail gsc-thumbnail'><div class='gs-image-box gs-web-image-box gs-web-image-box-portrait'><a class='gs-image' href='" + item.link + "'>" + 
        "<img class='gs-image' class = 'gs-image-box gs-web-image-box gs-web-image-box-portrait' src='" + item.pagemap.cse_thumbnail[0].src + "'></a></td>"; 
      //Link 
      content += "<td><a class='gs-title' href='" + item.link + "'>" + item.htmlTitle + "</a><br/>"; 
      //File format for PDF, etc. 
      if (item.fileFormat != null) 
       content += "<div class='gs-fileFormat'><span class='gs-fileFormat'>File Format: </span><span class='gs-fileFormatType'>" + item.fileFormat + "</span></div>"; 
      //description text and URL text. 
      content += item.htmlSnippet.replace('<br>','') + "<br/><div class='gs-bidi-start-align gs-visibleUrl gs-visibleUrl-long' dir='ltr' style='word-break:break-all;'>" + item.htmlFormattedUrl +"</div>" + 
       "<br/></td></tr></tbody></table></div>"; 
      document.getElementById("googleContent").innerHTML += content; 
     } 
     //Page Controls 
     var totalPages = Math.ceil(response.searchInformation.totalResults/10); 
     console.log(totalPages); 
     var currentPage = Math.floor(start/10 + 1); 
     console.log(currentPage); 
     var pageControls = "<div class='gsc-results'><div class='gsc-cursor-box gs-bidi-start-align' dir='ltr'><div class='gsc-cursor'>"; 
     //Page change controls, 10 max. 
     for (var x = 1; x <= totalPages && x<=10; x++) { 
      pageControls += "<div class='gsc-cursor-page"; 
      if (x === currentPage) 
       pageControls += " gsc-cursor-current-page"; 
      var pageLinkStart = x * 10 - 9; 
      pageControls+="'><a href='search-results.htm?start="+pageLinkStart+"&q="+query+"'>"+x+"</a></div>"; 
     } 
     pageControls += "</div></div></div>"; 
     document.getElementById("googleContent").innerHTML += pageControls; 
    } 

    //Get search text from query string. 
    var query = document.URL.substr(document.URL.indexOf("q=") + 2); 
    var start = document.URL.substr(document.URL.indexOf("start=") + 6, 2); 
    if (start === "1&" || document.URL.indexOf("start=") === -1) 
     start = 1; 

    //Load the script src dynamically to load script with query to call. 
    // DOM: Create the script element 
    var jsElm = document.createElement("script"); 
    // set the type attribute 
    jsElm.type = "application/javascript"; 
    // make the script element load file 
    jsElm.src = "https://www.googleapis.com/customsearch/v1?key=yourApikeyhere&cx=yoursearchengineidhere&start="+start+"&q=" +query +"&callback=hndlr"; 
    // finally insert the element to the body element in order to load the script 
    document.body.appendChild(jsElm); 
</script> 
</body> 
</html> 
相關問題