ajax版Google自定义站内搜索

网络博客 郑永 9007℃ 22评论 显示侧边栏

以前就看到老肥博客的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;} 可以设置缩略图大小。

转载请注明:郑永博客 » ajax版Google自定义站内搜索

历史上的今天:

(22)个小伙伴在吐槽
Loading...
  1. 小蝴蝶2013-02-24 12:35 Google Chrome 25 Windows 7 回复

    哎呀沙发!!!!!!

    沙发!
    • 郑永2013-02-24 23:55 Google Chrome 23 Windows 7 回复

      坐人大腿也不错,哈哈。也是沙发一族。

  2. 小蝴蝶2013-02-24 12:35 Google Chrome 25 Windows 7 回复

    好险差点没抢到

    板凳!
  3. 空空裤兜2013-02-24 13:01 Firefox 19 Windows 7 回复

    我也试着折腾去

    地板!
    • 郑永2013-02-24 14:04 Firefox 19 Windows XP 回复

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

  4. 爱软E2013-02-24 13:05 Firefox 19 Windows 8 回复

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

    4楼
  5. qfgz4062013-02-24 23:03 Internet Explorer 8 Windows XP 回复

    虽然貌似很复杂 不过值得试试 哦

    5楼
    • 郑永2013-02-24 23:52 Google Chrome 23 Windows 7 回复

      恩,可以试试,嘿嘿 :)

    • 爱软E2013-02-24 23:58 Firefox 19 Windows 8 回复

      搜索页面模版 用那个 博主

    • 郑永2013-02-25 00:58 Google Chrome 23 Windows 7 回复

      自己新建,例子:http://xptt.com/search-wordprees-station-changed-to-google-custom-search.html

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

    6楼
  7. 我也来支持一下

    7楼
  8. 我的名字叫麒2013-02-25 07:09 Google Chrome 25 Windows 7 回复

    看不懂,友情顶帖!

    8楼
  9. 鲜活优惠码2013-02-26 13:02 Internet Explorer 9 Windows 7 回复

    收藏代码备用啊 谢谢

    9楼
  10. 所谓刚子2013-02-27 10:05 Google Chrome 25 Windows 7 回复

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

    10楼
    • 郑永2013-02-27 21:43 Firefox 19 Windows XP 回复

      呵呵,有时候是会抽风,内部的也要用。

  11. zwwooooo2013-03-01 12:55 Firefox 19 Windows 7 回复

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

    11楼
    • 郑永2013-03-01 13:36 Firefox 19 Windows XP 回复

      我也提供了两个模式,搜索不了就用内置。

  12. 大发扑克2013-03-06 15:01 Internet Explorer 9 Windows 7 回复

    灰常有用, 感谢博主,

    12楼
  13. 简谱网2014-05-03 11:19 Google Chrome 30 Windows XP 回复

    抽风太严重了

    13楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址