Question

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

这不能正常使用每个框的谷歌生成代码，它们都会获得相同的表单ID，这显然是无效的。这会导致Google水印品牌无法显示在方框＃2中，并且某些自动/谷歌生成的变量也无法为第二个方框生成，例如ss参数（搜索会话）。

现在，搜索本身可以在两个框中工作，例如用户搜索，用于更正结果页面，并显示正确的结果。

我只是想解决这个问题：如何让第二个表单获得不同的ID值（并且仍能正常工作 - 因为google的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>

Answer 1

来自：http://www.google.com/cse/docs/cref.html

名为“form”的/ coop / cse / brand中的参数输出代码中的第一个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。

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

谢谢，毛茸茸的拉里

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

2 个答案: