Google Site Search - 完全自定义的搜索输入答案

【问题标题】：Google Site Search - Completely Custom Search InputGoogle Site Search - 完全自定义的搜索输入
【发布时间】：2011-08-24 11:58:06
【问题描述】：

我想在 Google Site Search 中使用完全自定义的搜索输入。我想输入文本，点击搜索按钮并被带到结果页面。我在我的网站上有这个工作，但是我无法完全控制搜索输入。最初我想将它包装在这样的标签中：

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

但是，Google 提供了一个代码块来呈现表单，并且试图将其粘贴在那些 p 标记中是行不通的。表单呈现如下：

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

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

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

【问题讨论】：

标签： php javascript wordpress search google-search

【解决方案1】：

在搜索页面中，您不需要谷歌提供的任何控件。您可以简单地使用文本框和按钮。在按钮单击事件上生成搜索字符串并将其传递给搜索结果页面。在结果页面可以使用google search 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();

}

【讨论】：