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

Leave a Reply to 小蝴蝶

gravatar

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