Google Site Search - 完全自定義搜索輸入

Question

我想在Google Site Search中使用完全自定義的搜索輸入。我想輸入文本，點擊搜索按鈕並進入結果頁面。我在我的網站上工作，但我無法完全控制搜索輸入。起初，我想它包裝在一個標籤，像這樣：

<span class="trigger-a-search" title="Search">Search</span> 
<p class="basic-search" id="headerSearch"> 
    <!-- Search field in here --> 
</p> 

然而，谷歌提供的代碼塊來渲染表單，並試圖把它粘那些p標籤內不起作用。表單會呈現這樣的：

<span class="trigger-a-search" title="Search">Search</span> 
<p class="basic-search" id="headerSearch"> 
    <!-- Google provided code goes here --> 
</p> 
<!-- Appears here --> 

所以我不能在我需要它裏面的標籤包裝它控制搜索輸入框的外觀。

因此，我可以在頁面上獲取搜索輸入，並將其轉發到搜索結果頁面，但我無法使用我自己的完全自定義搜索輸入，當您點擊時，它會轉到相同的特定搜索結果頁面「搜索」。你會如何做到這一點？

Answer 1

在搜索頁面中，您不需要任何Google提供的控件。你可以簡單地使用文本框和按鈕。在按鈕單擊事件上生成搜索字符串並將其傳遞到搜索結果頁面。在結果頁面中，您可以使用Google搜索API來獲取搜索結果。

function initializeGSearch() { 
    ws = new google.search.WebSearch(); 
    ws.setNoHtmlGeneration(); 
    ws.setSiteRestriction('YOUR SITE'); 
    ws.setResultSetSize(google.search.Search.LARGE_RESULTSET); //8 results 
    ws.setSearchCompleteCallback(this, gotResults); 
    ws.execute("SEARCH TEARM"); 
} 

function gotResults(){ 
     var resultcontent = ''; 
     var resultdiv = document.getElementById('searchresults');   

     for (i=0; i<ws.results.length; i++) 
     { 
      var result = ws.results[i]; 
      var url = result.unescapedUrl; 
      var target = getTarget(url); 
      var img = getImage(url); 
      resultcontent += "<div class='dgsearchresultsbody'><a class='title' href='"+url+"' "+ target +">"+img+""+result.title+"</a><br/>"+result.content+"<br/><span class='url'>"+url+"</span></div><br/><br/>"; 
     } 
     resultdiv.innerHTML = resultcontent; 
     addPaginationLinks(); 

}