同一页上使用多个Google CSE（自定义搜索引擎）框

Question

我正在尝试在同一页面上实现两个（不同的）Google CSE搜索框。问题在于，只有第一个实例能正常工作。例如，在页眉中放置全站搜索框，然后在某些页面上放置第二个搜索框，该搜索框在站点的狭窄范围内进行搜索等。

使用每个框的谷歌生成代码时，它们都会获得相同的表单ID，这显然是无效的。这导致谷歌水印品牌无法出现在第二个框中，而且一些自动/谷歌生成的变量也无法为第二个框生成，例如ss参数（搜索会话）。

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

我只是想解决这个问题：如何使第二个表单获得不同的ID值（并仍然正常工作-因为谷歌的javascript寻找ID“cse-search-box”）。我尝试向

元素的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>

- GWR

Answer 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将创建一个针对的代码，而给它 box2 将触发不同ID的操作。关键字searchbox_demo是保留的。

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

- Sébastien Renauld

---

不是问题！顺便说一下，尽情尝试CSE API吧。你可能会喜欢额外的定制选项！ - Sébastien Renauld

在你的fiddle中，这个：<input type="text" name="q" id="q" class="text_input" /> 中的id="q"在两个搜索框中都有重复。至少会导致HTML验证错误。 - Kringle

Answer 2

这是一个经过测试的解决方案。花了我一些时间，因为我比较慢，而且并不总是使用CSS。

使用V1代码。在设置屏幕上选择获取代码时，有一个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

谢谢， Hairy Larry

- Hairy Larry