2

我的目标是在同一个 wordpress 页面上放置 2 个搜索表单。我正在使用 iframe 表单代码，并且已经整理出如何将其定向到搜索元素。

但表单包含以下脚本：

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

首先按 ID 定义搜索框

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

但是，如果您使用多种形式，那么您（我不正确地知道）最终会得到具有相同 ID 的元素......并且品牌+焦点/模糊事件在两种形式中都不起作用。

表格基本上看起来像：

<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 脚本，我认为将 ID 更改为类名并进行 .each() 迭代会很容易。但谷歌的代码是纯 javascript，我不熟悉，虽然我读到 getElementbyClass 不是超级可靠。

那么这是可以解决的还是不值得担心呢？

4

1 回答 1

2

最终，我从 google.com 中注释掉了该脚本，并用我自己的自定义版本替换了它：

` 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

`

在您将结果定向到的 search.php 页面上（所以这是一个 2 页的搜索表单，我在某处在线找到了一个教程），您将需要：

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

`

于 2011-06-13T15:46:48.070 回答