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(); 

}