Google CSE - несколько поисковых форм на одной странице

Question

Я хочу разместить 2 формы поиска на одной странице WordPress.Я использую код формы iframe и уже разобрался, как направить это на поисковый элемент.

, но форма содержит следующий скрипт:

www.google.com / cse / brand? Form = cse-search-box & lang = ru

, который начинается с определенияполе поиска по идентификатору

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

, но если вы используете несколько форм, то вы (неправильно я знаю) в конечном итоге с элементами, которыеимеют одинаковый идентификатор ... и события брендинга + фокусировки / размытия не работают в обеих формах.

форма в основном выглядит следующим образом:

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

если бы это был скрипт jquery, я думаю, было бы легко изменить идентификатор на имя класса и выполнить итерацию .each (),но код Google - чистый javascript, и я не знаком с этим, хотя я читал, что getElementbyClass не супер надежен.

так это поправимо или не стоит волноваться?

Answer 1

В конце концов я закомментировал этот скрипт на google.com и заменил его своей собственной пользовательской версией:

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

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

`

и на странице search.php, на которую вы направляете результаты (так что это двухстраничная форма поиска, я где-то нашел учебник по этому вопросу в Интернете где-то) вам понадобится:

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

`