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

时间:2011-08-24 01:54:12

标签: php javascript wordpress search google-search

我想在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 -->

所以我无法控制搜索输入框的外观,方法是将它包装在我需要它在里面的标签中。

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

1 个答案:

答案 0 :(得分:2)

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

}