Google CSE - multiple search forms on the same page

Question

i'm aiming to put 2 search forms on the same wordpress page. i'm using the iframe form code and have already sorted out how to direct that to a search element.

but the form includes the following script:

www.google.com/cse/brand?form=cse-search-box&lang=en

which starts by defining the search box by ID

var f = document.getElementById('cse-search-box');

but if you use multiple forms then you (incorrectly i know) end up with elements that have the same ID.. and the branding+ focus/blur events don't work across both forms.

the form basically looks like:

<form action="/search.php" class="cse-search-box">
<div>
<input type="hidden" name="cx" value="" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="32" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

if this were a jquery script i think it'd be easy to change the ID to a class name and do an .each() iteration. but google's code is pure javascript and i'm not familiar with that, though i read getElementbyClass isn't super reliable.

so is this fixable or not worth worrying over?

Answer 1

eventually i commented out that script from google.com and replaced it w/ my own custom version:

` if (window.history.navigationMode) { window.history.navigationMode = 'compatible'; }

jQuery.noConflict();
jQuery(document).ready(function($) { //tells WP to recognize the $ variable

    //from google's original code- gets the URL of the current page
    var v = document.location.toString();
    var existingSiteurl = /(?:[?&]siteurl=)([^&#]*)/.exec(v);
    if (existingSiteurl) {
    v = decodeURI(existingSiteurl[1]);
    }
    var delimIndex = v.indexOf('://');
    if (delimIndex >= 0) {
    v = v.substring(delimIndex + '://'.length, v.length);
    }


    $(".cse-search-box").each( function() { 
        var q = $(this).find("input[name=q]");
        var bg = "#fff url(http:\x2F\x2Fwww.google.com\x2Fcse\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat";
        var b = "#fff";
      if (q.val()==""){
        q.css("background",bg);
      } else {
        q.css("background",b);
      }
      q.focus(function() {
        $(this).css("background", b);
        });
        q.blur(function() {
            if($(this).val()==""){
                $(this).css("background", bg);
            }
        });

        //adds hidden input with site url
        hidden = '<input name="siteurl" type="hidden" value="'+ v +'">'
        $(this).append(hidden);
    });


}); //end document ready functions

`

and on the search.php page that you are directing the results to (so this is a 2-page search form, i found a tutorial on that online somewhere) you will need:

` google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});

  /**
   * Extracts the users query from the URL.
   */ 
  function getQuery() {
    var url = '' + window.location;
    var queryStart = url.indexOf('?') + 1;
    if (queryStart > 0) {
      var parts = url.substr(queryStart).split('&');
      for (var i = 0; i < parts.length; i++) {
        if (parts[i].length > 2 && parts[i].substr(0, 2) == 'q=') {
          return decodeURIComponent(
              parts[i].split('=')[1].replace(/\+/g, ' '));
        }
      }
    }
    return '';
  }

  function onLoad() {
    // Create a custom search control that uses a CSE restricted to
    // code.google.com
    var customSearchControl = new google.search.CustomSearchControl)('google_search_id');

    var drawOptions = new google.search.DrawOptions();
    drawOptions.setAutoComplete(true);

    // Draw the control in content div
    customSearchControl.draw('results', drawOptions);

    // Run a query
    customSearchControl.execute(getQuery());
  }

  google.setOnLoadCallback(onLoad);

`