ajax版Google自定义站内搜索

以前就看到老肥博客的ajax版google搜索挺不错的,可以自定义样式来跟主题搭配,当初有想折腾一下,可是没成功,前几天我随口问了一下小蝴蝶,看看她能解决么,事实证明,她很多问题都可以解决(小蝴蝶对代码挺熟悉),原来我的google自定义搜索的api是调用旧版的,所以改代码的时候牛头不对马嘴,没折腾出来了。

ajax版google自定义站内搜索,支持缩略图显示。

优点:界面个性化,定制性强,搜索结果更精准,更全面。

缺点:国内有的人不喜欢用google搜索,速度有点慢,有时候会突然不行。(我是在搜索界面加入一个内置搜索,如果不行,就用wordpress自带的)

效果可以试一下本站的站内搜索,个人感觉比在google网站用site:xptt.com+关键字 搜索还要准确,有时候在那边搜索不到的,用这个api的却能搜索出来。

ajaxgooglesearch

googleajaxsearch

实现方法如下:

新建一个cse模板,新建一个页面,调用这个模板,隐藏这个页面。

搜索模板的代码如下:

<div id="cse">
<p class="loading">google正在搜索...</p>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.min.js"></script> //如果你主题已经有调用了,可以删除掉。
<script type="text/javascript">
google.load('search', '1', {language : 'zh-CN' , "nocss" : true });
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('007643642154972738189:9jsfnr5uxos');   //007的这段id换成你的谷歌自定义搜索id
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
customSearchControl.setNoResultsString('什么也没找到,请重试');
customSearchControl.setSearchCompleteCallback(null,function() {
$('input.gsc-input').select();
var searchwords = $('input.gsc-input').val();
$('.p > b').text(searchwords);
$('a.gs-title').addClass('new').unwrap().wrap('<h3></h3>').each(function() {
var title = $(this).html().replace(/\|.*/g, '');
$(this).html(title);
});
$('b:contains("...")').contents().unwrap();
$('.gsc-cursor-current-page').removeClass('gsc-cursor-page');
});
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);
}
});
</script>
</div>

在主题的css文件末尾加入如下代码:

/*正在加载*/
p.loading{
background-color: #fea;
text-align: center;
padding: 3px;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
width: 180px;
border: none;
margin-left: 170px;
}
/*google搜索框*/
.gsc-search-box {
display:none;
}
.gsc-input {
display:none
}
.gsc-branding {
display:none;
}
img.gsc-branding-img {
position: relative;
top: 2px;
left: 3px;
}
.gsc-tabsArea, .gsc-clear-button, .gsc-tabHeader, .gsc-resultsHeader, .gsc-trailing-more-results, a.gsc-trailing-more-results,.gsc-url-top, .gs-visibleUrl, .gs-watermark, .gsc-adBlock, .gsc-adBlockVertical,.gsc-thumbnail-inside {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gs-bidi-start-align, .gs-snippet{
clear:both;
margin-top:5px;
}
/*单条搜索结果*/
.gs-result {
overflow: hidden;line-height:24px  ;border-bottom:1px solid #ccc
}

.gs-result b {
padding: 1px 5px;
background-color: #fea;
border-radius: 3px;
text-shadow: none;
}
.gs-snippet b {
color: #999;
}
.gs-visibleUrl-long {
color: #aaa;
}
/*页码*/
.gsc-cursor-page, a.gsc-trailing-more-results {
cursor: pointer;
}
.gsc-cursor-page, .gsc-cursor-current-page, .twitter_pagebar a, .twitter_pagebar a:visited, .twitter_pagebar strong, .pagebar a, .pagebar a:visited, .this-page {
float: left;
padding: 3px 7px;
margin: 2px;
text-decoration: none;
color: #454545;
border: 1px solid #CCC !important;
}
.gsc-cursor-page:hover, .twitter_pagebar a:hover, .pagebar a:hover {
border: 1px solid #990B25 !important;
}
.gsc-cursor-current-page, .twitter_pagebar strong, .this-page {
padding: 3px 7px;
margin: 2px;
color: #EEE;
background-color: #D73555;
border: 1px solid #990B25;
}
/*标题*/
.gs-title{
color: #3B5998;
}
.gs-title:hover{
color: #893F2C;
}
.gs-result h3{
margin:10px 0px 5px 0px;
}
.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * {
font-size: 18px;
margin-bottom: 10px;
line-height: 26px;
font-weight: 700;
text-decoration: none;
}
/*技术提供*/
table.gcsc-branding {color:#888;width:220px;float:right;margin-top:30px;font-size:12px }
table.gcsc-branding img{vertical-align:middle;}
.gsc-result-info{
text-align: left;
color: #676767;
font-size: 13px;
padding-left: 8px;
margin: 10px 0 10px 0;}
/*整体*/
.gsc-results{border-top:1px solid #eee;}
.gsc-cursor{margin-top:20px;}
.gs-image{height:125px;width:160px;}

没了,就这些,现在google自定义搜索的api还带有缩略图,还不错哈。

ps更新:之前看到文章的,可以去掉css的.gs-image, 可以显示缩略图。然后底部添加:.gs-image{height:125px;width:160px;} 可以设置缩略图大小。

分类:网络博客 标签:,,,

上一篇:ipod touch 4 可以定位了!陀螺仪?

下一篇:让iframe载入前没有大片空白区域

已经有22条评论!

Loading...
  1. 哎呀沙发!!!!!!

    沙发!
  2. 好险差点没抢到

    板凳!
  3. 我也试着折腾去

    地板!
    • 更新:去掉css的.gs-image, 可以显示缩略图。然后底部添加:.gs-image{height:125px;width:160px;} 可以设置缩略图大小。

  4. 我也想折腾一下这个,装个谷歌搜索

    4F
  5. 虽然貌似很复杂 不过值得试试 哦

    5F
  6. 我第一次来就赶上好文章,支持博主

    6F
  7. 看不懂,友情顶帖!

    8F
  8. 收藏代码备用啊 谢谢

    9F
  9. 我去掉了 该用自身搜索了。。因为谷歌是不是的会抽风。。。不过这个ajax还是很不错的

    10F
  10. 一直都用google自定义,可惜杯具,只好加上两个模式

    11F
  11. 灰常有用, 感谢博主,

    12F
  12. 抽风太严重了

    13F

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑