Google CSE - mehrere Suchformulare auf der gleichen Seite

Question

Ich ziele darauf ab, 2 Suchformulare auf derselben Wordpress-Seite zu platzieren. Ich verwende den iframe-Formularcode und habe bereits herausgefunden, wie man diesen an ein Suchelement weiterleitet.

aber das Formular enthält das folgende Skript:

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

die mit der Definition des Suchfeldes nach ID beginnt

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

aber wenn Sie mehrere Formulare verwenden, dann Sie (fälschlicherweise ich weiß) am Ende mit Elementen, die die gleiche ID haben.. und die Branding + Fokus/blur-Ereignisse funktionieren nicht über beide Formen.

sieht das Formular im Wesentlichen so aus:

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

wenn dies ein Jquery-Skript wäre, denke ich, dass es einfach wäre, die ID in einen Klassennamen zu ändern und eine .each()-Iteration durchzuführen. aber Googles Code ist reines Javascript und ich bin damit nicht vertraut, obwohl ich habe gelesen, dass getElementbyClass nicht super zuverlässig ist.

Kann man das beheben oder sollte man sich keine Sorgen machen?

Answer 1

Schließlich habe ich das Skript von google.com auskommentiert und es durch meine eigene Version ersetzt:

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

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

`

und auf der Seite search.php, auf die Sie die Ergebnisse leiten (es handelt sich also um ein 2-seitiges Suchformular, ich habe irgendwo online ein Tutorial dazu gefunden), benötigen Sie:

` 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);

`