带自定义搜索框的Google自定义搜索?

时间:2013-04-11 13:47:07

标签: javascript css search-engine google-custom-search

我希望将Google自定义搜索添加到我的网站,但我已经设置了搜索框占位符,我希望我的搜索框看起来像这样。

经过一些搜索后,似乎所有先前的问题如this one都已过时。

关于造型,我唯一发现的是:

<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:nonw 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>

但是,当您提交表单时,没有任何反应。

我注意到action =“”是空白的,当我输入我的网站“www.kokorugs.com/”时,它也没有用。

任何想法都将不胜感激!

1 个答案:

答案 0 :(得分:0)

我发现的唯一方法是使用JQuery在渲染的Google元素中创建钩子。由于您要将自定义搜索框挂钩到元素中,因此您应该呈现 gsce:仅结果而不是 gsce:search ,并按照我之前的{ {3}}