2011-03-29 55 views
2

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

但形式包括以下脚本:

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是不是超级可靠。

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

回答

2

最终我注释掉来自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); 

`

+0

我想这也解决,是在同样的想法 - 有一个命名冲突,从而为第二自定义搜索输入看来你需要创建一个类的函数,你必须得到品牌正确刷新。谢谢 – toyNN 2011-12-09 01:56:26