谷歌网站搜索-完全自定义搜索输入 - Google Site Search - Completely Custom Search Input

Google Site Search - Completely Custom Search Input

我想使用一个完全自定义的搜索输入与谷歌网站搜索。我想输入文本，点击搜索按钮，然后被带到结果页面。我有这个工作在我的网站，但我不能完全控制搜索输入。最初我想把它包装在一个标签中，像这样:

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

因此，我无法通过将搜索输入框包装在我需要的标签中来控制它的外观。

所以我可以在页面上得到一个搜索输入，它可以工作，转发到搜索结果页面，但是我不能使用我自己的，完全自定义的搜索输入，当你点击"搜索"时，它将转到相同的特定搜索结果页面。你会怎么做呢?

在搜索页面中，您不需要使用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();
}