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

Question

我正在尝试创建一个谷歌自定义搜索（我只需要在我的网站上添加某种搜索引擎），并且需要使其能够使用我自己的搜索框（输入字段）。我需要确切的大小。我还需要能够制作自己的搜索按钮。我将需要能够更改搜索按钮的大小和背景。我不确定，但我可能需要它是一个普通的img。 有人知道如何做到这一点吗？ 如果您无法在谷歌上实现此目标，您是否知道其他方法？ 如果除使用自己的搜索引擎之外没有其他方法，我可以请您提供一个非常简化的教程链接，以教我如何制作自己的搜索引擎。我愿意付出额外的努力去学习，但我尝试了一些教程，并查看了三个不同的教程后因为它们很长而令人困惑所以放弃了。我希望我只是在错误的地方寻找。

- Sean

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

- YOU

---

那些XXXXX和YYYYYYY是什么？ - lzap

这些XXXX和YYYYY是从Google Custom Search获取的代码中定义的数字。 - Ergec

@MatthewLock，我不确定我2010年的原始答案是否可行，但我添加了一个ajax版本，现在应该可以使用。 - YOU

Answer 2

对于正在寻找“外层结果”选项的谷歌用户，在“外观”下使用新解决方案。我使用了YOU的答案并添加了一些小技巧使其正常工作。基本思路是获取Google提供的代码，隐藏Google的搜索框和按钮，并使用带有正确XXXXX:YYYY代码的YOU的答案。在隐藏时不要使用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>

- Ergec

---

嗨。这会导致页面重新加载，需要很长时间，并在URL后附加一些字符。你能告诉我一个方法，让结果像从谷歌复制的代码一样，因为你现在所做的方式正是我想要的，除了上述因素。 - It's a trap

Answer 3

嗨，Stack Overflow，

这个问题真的让我兴奋到做了一个小的演示 - 如果你正在尝试设置v2栏，处理平面望远镜，只想让望远镜工作，想要使用v2完全替换自定义栏，找到并定位使用的样式并覆盖它们。希望能帮到你！http://t.co/9nvx2l0DeD @eb_p1

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

- eburnett

---

将以下与编程相关的内容从英文翻译成中文。仅返回翻译后的文本：作为评论或详细说明。 - HemChe