同一页面上的多个 Google CSE（自定义搜索引擎）框答案

【问题标题】：Multiple Google CSE (Custom Search Engine) Boxes on Same Page同一页面上的多个 Google CSE（自定义搜索引擎）框
【发布时间】：2013-03-23 17:17:13
【问题描述】：

我正在尝试在同一页面上实现两个（不同的）Google CSE 搜索框。问题是只有第一个实例可以正常工作。例如，标题中的站点范围搜索框，然后在某些页面上，在站点的狭窄筒仓内搜索的第二个搜索框等。

这不能正常工作，因为每个盒子都使用谷歌生成的代码，它们都得到相同的表单 ID，这显然是无效的。这会导致 google 水印品牌无法出现在框 #2 中，并且一些自动/google 生成的变量也无法为第二框生成，例如 ss 参数（搜索会话）。

现在，搜索本身在两个框中都有效，例如用户搜索，被带到正确的结果页面，并显示正确的结果。

我只是想解决这个问题：如何使第二个表单获得不同的 ID 值（并且仍然可以正常工作 - 因为谷歌的 javascript 会查找 ID cse-search-box）我尝试添加一个唯一标识符<form> 元素的 ID 和 NAME 属性，但这会导致 google.com javascript 发生故障（因为我相信它只查找 `cse-search-box'）

代码如下：

搜索框 1：

<form id="cse-search-box" name="cse-search-box" class="search searchHeader" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:000" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

搜索框 2：

<form id="cse-search-box" name="cse-search-box" class="search searchWebDirectory" method="get" action="/search">
    <input type="hidden" name="cx" value="partner-pub-0000000000000000:111" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" id="q" class="text_input" />
    <input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

【问题讨论】：

标签： javascript google-custom-search

【解决方案1】：

发件人：http://www.google.com/cse/docs/cref.html

/coop/cse/brand 中名为“form”的参数输出代码中的第一个 getElementById。因此，使用http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en 将创建一个cse-search-box 目标代码，而给它box2 将在不同的ID 上触发。关键字searchbox_demo 是保留的。

如果您愿意，不妨试一试：http://jsfiddle.net/JTV6f/1/。但是，考虑到您在做什么，如果我是您，我会切换到 V1 或 V2 API。

【讨论】：

没问题！顺便说一下，给 CSE API 一个完整的尝试。您可能会喜欢额外的自定义选项！
在你的小提琴中，id="q" 在这个：在两个搜索中都是重复的盒子。至少会引发 HTML 验证错误。

【解决方案2】：

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

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

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

div tag

searchcode

end div tag

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

div id='cse'

还有一点点

customSearchControl.draw('cse', options);

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

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

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

style type='text/css' scoped

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

http://deltaboogie.com/search

谢谢，毛茸茸的拉里

【讨论】：