Multiple Google CSE (Custom Search Engine) Boxes on Same Page

问题

I am trying to implement two (different) Google CSE search boxes on the same page. The issue is that only the first instance works properly. For example, a sitewide search box in the header, then on certain pages, a 2nd search box that searches within a narrow silo of the site, etc.

This doesn't work properly in that with using the google-generated code for each box, they both get the same form ID, which is obviously not valid. This causes the google watermark branding to fail to appear in box #2, and also some auto/google generated variables fail to generate for the 2nd box also, such as the ss parameter (search session).

Now, the search itself works in both boxes, e.g. user searches, is taken to correct results page, and correct results are shown.

I am just trying to resolve this issue: how can I cause the 2nd form to get a different ID value (and still work properly - as google's javascript looks for the ID cse-search-box) I have tried adding a unique identifier to the ID and NAME attributes of the <form> element, but that caused the google.com javascript to malfunction (as I believe it looks for `cse-search-box' only)

Code is as follows:

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>

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

回答1:

From: http://www.google.com/cse/docs/cref.html

The parameter in /coop/cse/brand named "form" outputs the first getElementById in the code. As such, using http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en will create a cse-search-box-targetted code, whilst giving it box2 will trigger on a different ID. The keyword searchbox_demo is reserved.

Give it a go if you'd like to: http://jsfiddle.net/JTV6f/1/ . Considering what you are doing, however, if I were you, I'd switch to either the V1 or V2 APIs.

回答2:

This is a tested solution. Took me a while but I'm slow and I don't use CSS all the time.

Use the V1 code. When you select Get Code on the setup screen there is an option for the V1 code.

Put your search code in a div

div tag

searchcode

end div tag

Make your cse variables unique. That will be two places at the top of the code.

div id='cse'

and a little lower

customSearchControl.draw('cse', options);

For each search these should be the same but different than the other searches. I used cse0, cse1, cse2.

This will fix the searches so each search will work as specified but they will still share the same CSS.

So scope your styles with the scoped attribute.

style type='text/css' scoped

Do this for each search code. Now your searches can have their own look and feel, color, etc.

http://deltaboogie.com/search

Thanks, Hairy Larry

来源：https://stackoverflow.com/questions/15589725/multiple-google-cse-custom-search-engine-boxes-on-same-page

标签

javascript

google-custom-search