如何在同一页面上有多个 Google 自定义搜索字段答案

【问题标题】：How to have multiple Google Custom Search field on the same page如何在同一页面上有多个 Google 自定义搜索字段
【发布时间】：2014-03-19 16:50:42
【问题描述】：

我正在尝试使用 Google 自定义搜索 (GCS) 在同一页面上设置多个搜索字段，如下所示：

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

<gcse:search></gcse:search>

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

<gcse:search></gcse:search>

不幸的是，它不起作用。对每个字段使用相同的cx 进行搜索。当它对该地址执行 ajax 请求时：https://www.googleapis.com/customsearch/v1element... 有这个值：&cx=user_id:field_id1，并且两个字段的值相同。

解决办法是什么？

我已经看到了这个问题：Multiple Google CSE (Custom Search Engine) Boxes on Same Page，但它似乎在另一个版本上。

【问题讨论】：

标签： javascript google-custom-search

【解决方案1】：

这是一个经过测试的解决方案。花了我一段时间，但我很慢，而且我并不一直使用 CSS。

使用 V1 代码。当您在设置屏幕上选择 Get Code 时，会出现 V1 代码选项。

将您的搜索代码放在一个 div 中

div 标签

搜索代码

结束 div 标签

使您的 cse 变量独一无二。那将是代码顶部的两个位置。

div id='cse'

还有一点点

customSearchControl.draw('cse', options);

对于每个搜索，这些搜索应该与其他搜索相同但不同。我用过 cse0、cse1、cse2。

这将修复搜索，因此每个搜索都将按指定工作，但它们仍将共享相同的 CSS。

因此，使用 scoped 属性限定您的样式。

style type='text/css' 作用域

对每个搜索代码执行此操作。现在您的搜索可以有自己的外观和感觉、颜色等。

http://deltaboogie.com/search

谢谢，毛茸茸的拉里

【讨论】：

【解决方案2】：

尝试使用iFrames：

index.html

<html>
    <head>
        <title></title>
        <style type="text/css">
            /* Layout Style */
        </style>
    </head>
    <body>
        <iframe src="gcse1.html"></iframe>
        <iframe src="gcse2.html"></iframe>
    </body>
</html>

gcse1.html

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script>
            (function() {
                var cx = 'user_id:field_id1';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
            })();
        </script>
        <gcse:search></gcse:search>
    </body>
</html>

gcse2.html

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script>
            (function() {
                var cx = 'user_id:field_id2';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
            })();
        </script>
        <gcse:search></gcse:search>
    </body>
</html>

【讨论】：

【解决方案3】：

也许您的方法可以改进。您在同一页面上声明 var cx 两次。第二个代替第一个。

而不是 2 次搜索，有一个带有单选选项来选择 1 或 2 重置 cx 的值

<script>
  (function() {
    var cx = 'user_id:field_id1';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);

    // This basically takes the value of the radio button (requires jQuery)
    $("input:radio[name='GCSField']").change(function() {
        cx = $(this).val();
    });

  })();
</script>
<label for="user1">
<input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label>
<label for="user2">
<input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label>

<gcse:search></gcse:search>

否则只是创建一个新变量而不是重用和 gcse

<script>
  (function() {
    var cx1 = 'user_id:field_id1';
    var gcse1 = document.createElement('script');
    gcse1.type = 'text/javascript';
    gcse1.async = true;
    gcse1.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx1;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse1, s);
  })();
</script>

<gcse:search></gcse:search>

<script>
  (function() {
    var cx2 = 'user_id:field_id2';
    var gcse2 = document.createElement('script');
    gcse2.type = 'text/javascript';
    gcse2.async = true;
    gcse2.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx2;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse2, s);
  })();
</script>

<gcse2:search></gcse2:search>

【讨论】：

不工作。 Google 不解析 gcse2 标签。顺便说一句，您没有为脚本提供标签名称，因此脚本中的 gcse2 只是一个用于创建

【解决方案4】：

这是使用 CSE 改进的非 iframe 方法：http://codepen.io/mikedaul/pen/xqxYOO?q=flowers

基本思路：

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

我添加了一个longer explanation here，fwiw。

【讨论】：