How to have multiple Google Custom Search field on the same page

Question 1

Try using 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>

Question 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

Question 3

Perhaps your approach could be improved. You are declaring var cx twice on the same page. The second replaces the first.

Rather than 2 searches, have one with radio options to select 1 or 2 resetting the value of cx

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

Otherwise just create a new variable instead of reusing and 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>

Question 4

Here's a non-iframe approach using CSE refinements: http://codepen.io/mikedaul/pen/xqxYOO?q=flowers

basic idea:

<script>
  (function() {
  var cx = 'your-cse-id-here';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
  })();
</script>

<gcse:searchresults-only defaultToRefinement="refinement-tag-1"></gcse:searchresults-only>

<gcse:searchresults-only defaultToRefinement="refinement-tag-2"></gcse:searchresults-only>

I included a longer explanation here, fwiw.