Question

我的目标是在同一个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并不是非常可靠。

这样可以解决这个问题还是不值得担心？

Answer 1

最终我从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);

`

Google CSE - 同一页面上的多个搜索表单

1 个答案: