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

【问题标题】：Google Custom Search with custom search box and button?带有自定义搜索框和按钮的 Google 自定义搜索？
【发布时间】：2011-01-11 13:32:42
【问题描述】：

我正在尝试进行 Google 自定义搜索（我只需要在我的网站上使用某种搜索引擎），我需要这样做以便我可以使用自己的搜索框（输入字段）。我需要它是精确的尺寸。我还需要能够制作自己的搜索按钮。我将需要能够更改搜索按钮的大小和背景。我还不完全确定，但我实际上可能需要它成为一个常规的 img。

有人知道怎么做吗？

如果您无法通过 Google 做到这一点，您知道另一种方法吗？

如果除了使用您自己的搜索引擎之外别无他法，我能否获得一个非常简化的教程的链接，该教程是关于如何制作我自己的。我愿意付出额外的工作来学习，但是我尝试了一下，在看了三个不同的tuts之后，我放弃了，因为它们非常长而且令人困惑。我希望我只是找错地方了。

【问题讨论】：

标签： input google-search google-custom-search

【解决方案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>

【讨论】：

那 XXXXX 和 YYYYYYY 是什么？
那些 XXXX 和 YYYYY 是您从 Google Custem Search 获得的代码中定义的数字。
@MatthewLock，我不确定我 2010 年的原始答案是否有效，但添加了 ajax 一个，现在应该可以工作了。

【解决方案2】：

适用于正在“外观”下寻找具有新“叠加结果”选项的解决方案的 Google 员工。我使用了您的答案并添加了一些小技巧以使其正常工作。基本想法是获取 Google 提供给您的代码，隐藏 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>

【讨论】：

嗨。这会导致页面重新加载，需要很长时间并将一些字符附加到 url。你能像从谷歌复制的代码一样告诉一个获得结果的方法吗，因为除了上述因素之外，你所做的正是我想要的

【解决方案3】：

ge 堆栈溢出，

这个问题真的让我兴奋不已，进行了一次小型演练 - 如果您尝试设置 v2 酒吧，处理扁平望远镜，只想让望远镜工作，想要更换完全使用 v2 的自定义栏，查找和定位使用的样式并覆盖它们。希望能帮助到你！ http://t.co/9nvx2l0DeD@eb_p1

长地址：http://eburnett.hubpages.com/hub/googlecustomsearchenginev2

【讨论】：

将其添加为评论或详细说明。