Google CSE - plusieurs formulaires de recherche sur la même page

Question

Je vis à mettre 2 formulaires de recherche sur la même page WordPress. J'utilise le code de formulaire IFRAME et j'ai déjà réglé comment diriger cela vers un élément de recherche.

Mais le formulaire comprend le script suivant:

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

qui commence par définir la boîte de recherche par ID

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

Mais si vous utilisez plusieurs formulaires, vous (incorrectement je sais) vous retrouvez avec des éléments qui ont le même ID .. et les événements Branding + Focus / Blur ne fonctionnent pas sur les deux formulaires.

Le formulaire ressemble essentiellement:

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

S'il s'agissait d'un script jQuery, je pense qu'il serait facile de changer l'ID en un nom de classe et de faire une itération .each (). Mais le code de Google est pur javascript et je ne le connais pas, même si je lis GetElementByClass n'est pas super fiable.

Alors, cela est-il réparable ou ne vaut-il pas la peine de s'inquiéter?

Answer 1

Finalement, j'ai commenté ce script de Google.com et je l'ai remplacé avec ma propre version personnalisée:

`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

`

Et sur la page Search.php que vous dirigez les résultats (donc c'est un formulaire de recherche de 2 pages, j'ai trouvé un tutoriel sur ce quelque part en ligne) dont vous aurez besoin:

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

`