谷歌CSE - 在同一页上的多个搜索表单

Question

我打算在同一个wordpress页面上放置2个搜索表单。我使用的iframe表单代码，并已经整理出如何将其引导到搜索元素。

但形式包括以下脚本：

www.google.com/cse/brand?form=cse-search-box &郎= 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更改为一个类名，做一个。每（）迭代。但谷歌的代码是纯粹的JavaScript和我不熟悉，虽然 我读getElementbyClass是不是超级可靠。

那么这是可以修复的还是不值得担心的？

Answer 1

最终我注释掉来自google.com该脚本，并取代它瓦特/我自己的自定义版本：

` 如果（window.history.navigationMode）{ window.history.navigationMode = '兼容'; }

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

`