一次在页面上显示多个 GCSE。

Question

像这样使用新的 GCSE 代码：

                    // google custom search engine for the whole site
                (function() {
                    var cx = '*****************';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                            '//cse.google.com/cse.js?cx=' + cx + '&gname=sitesearch';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                })();

和这样的元素：

            <gcse:searchbox gname="sitesearch"></gcse:searchbox>
            <gcse:searchresults gname="sitesearch"></gcse:searchresults>

如何在页面上包含第二个 gcse 标记并为其分配新的 CX：我试过像这样将每个的 gname 传递给 url：

'//cse.google.com/cse.js?cx=' + cx + '&gname=sitesearch';

但是没有用... 我已经阅读了它所说的文档；

(Optional) A name for the CSE element object. A name is used to retrieve an associated component by name, or to pair a searchbox component with a searchresults component. If not supplied, Custom Search will automatically generate a gname, based on the order of components on the webpage. For example, the first unnamed searchbox-only has the gname "searchbox-only0" and the second has the gname "seachbox-only1", and so on. Note that the automatically generated gname for a component in two-column layout will be two-column. The following example uses the gname storesearch to link a searchbox component with a searchresults component: which makes it easy to assign the searchbox to the search results I just can't seem to attach the cx code to the actual tag.

我读过这个： Multiple Google CSE (Custom Search Engine) Boxes on Same Page 但那指的是旧版本的 GCSE 而这个接受的答案是使用 iframe： How to have multiple Google Custom Search field on the same page

使用 iframe 似乎很笨拙而且不是正确的方法... ？

Answer 1

使用自定义搜索元素 v1 可以相对容易地完成：

<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function () {
  new google.search.CustomSearchControl('CSE_USER_ID:CDE_ID1').draw('cse');
  new google.search.CustomSearchControl('CSE_USER_ID:CDE_ID2').draw('cse2');
});
</script>

<div id='cse' style="width: 100%;">Loading</div>

<div id='cse2' style="width: 100%;">Loading</div>

演示：同一页面上有多个 Google CSE
http://box.galeksic.com/cse.multiple-on-same-page/

JavaScript API 参考 (v1)
https://developers.google.com/custom-search/docs/js/cselement-reference

我试过 v2，但不是很成功。

Answer 2

我一直在努力解决同样的问题，并在 google 产品论坛上遇到了 this post。

基本上，答案是使用单个 CSE 并使用 refinements 区分您要搜索的内容，这样您就可以使用 CSE 设置中的标签来确定搜索 URL 的范围。

注意：确保将细化设置为 'search only sites with this label'，假设这是您想要的。

然后，在您的 HTML 代码中，指定要用于每个结果框的默认优化，如下所示：

<script>
  (function() {
  var cx = 'your-cse-id-here';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
  })();
</script>

<gcse:searchresults-only defaultToRefinement="refinement-tag-1"></gcse:searchresults-only>

<gcse:searchresults-only defaultToRefinement="refinement-tag-2"></gcse:searchresults-only>

对于我的使用，我不想显示默认的细化选项卡（并且让两个结果框看起来像是独立的）所以我使用 CSS 来隐藏 'gsc-tabsArea' 元素。

More info on v2 CSE API and refinements...

这是一个可用的代码笔：http://codepen.io/mikedaul/pen/xqxYOO?q=flowers

希望对您有所帮助！

一次在页面上显示多个 GCSE。

Multiple GCSE's on page at one time.

google-custom-search