Question

我正在尝试使用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，但似乎是另一个版本。

Answer 1

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

使用V1代码。当您在设置屏幕上选择获取代码时，有一个V1代码选项。

将搜索代码放入div

div tag

searchcode

结束div标签

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

div id ='cse'

稍微低一点

customSearchControl.draw（'cse'，options）;

对于每次搜索，这些搜索应该与其他搜索相同但不同。我使用了cse0，cse1，cse2。

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

使用scoped属性来定义样式。

style type ='text / css'scoped

为每个搜索代码执行此操作。现在，您的搜索可以拥有自己的外观，颜色等。

http://deltaboogie.com/search

谢谢，毛茸茸的拉里

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

Answer 3

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

使用无线电选项选择1或2重置cx

的值，而不是2次搜索

<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自定义搜索字段

3 个答案:

的index.html

gcse1.html

gcse2.html