带自定义搜索框和按钮的Google自定义搜索？

Question

我正在尝试进行谷歌自定义搜索(我只需要在我的网站上使用某种搜索引擎),我需要制作它以便我可以使用自己的搜索框(输入字段).我需要它的大小.我还需要能够自己创建按钮进行搜索.我将需要能够更改搜索按钮的大小和背景.我还不完全确定,但我可能真的需要它成为一个普通的img.

有谁知道如何做到这一点？

如果你不能用Google做到这一点,你知道另一种方法吗？

如果除了使用自己的搜索引擎之外没有别的办法,我可以获得一个关于如何创建自己的简化教程的链接.我愿意投入额外的工作来学习,但我尝试了一下,在看了三个不同的啧啧之后,我放弃了,因为它们非常漫长而令人困惑.我希望我只是在错误的地方寻找.

Answer 1

这是我正在使用的那个,你只需要添加一些样式到<input id='q'搜索框,< input value='MyButton'是要点击的按钮

<!-- Google CSE Search Box Begins  -->
<center>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog">
  <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
  <input value="FORID:11" name="cof" type="hidden"/>
  <input id="q" style="width:600px;" name="q" size="75" type="text"/>
  <input value="MyButton" name="sa" type="submit"/>
</form>
</center>
....

编辑:以上是我2010年的答案,我无法确认它是否正常工作,但这是一个正常的工作.

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

有关详细信息,请参阅https://developers.google.com/custom-search/docs/js/cselement-devguide

Answer 2

对于正在寻找具有"外观和感觉"下的新"覆盖结果"选项的解决方案的Google员工.我使用了你的答案并添加了一些小工具来使它工作.基本的想法是获取谷歌给你的代码,隐藏谷歌的搜索框和按钮,并使用正确的XXXXX:YYYY代码使用你的答案.虽然隐藏<gcse:search></gcse:search>"不使用display:none否则搜索结果将无法正常工作.

<script>
    (function() {
    var cx = 'XXXXXXXXXX:YYYYYYYYY';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work-->
    <gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="" name="q" size="75" type="text"/>
    <button class="btn">Search</button>
</form>