ajax版Google自定义站内搜索

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

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

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

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

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

实现方法如下：

新建一个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;} 可以设置缩略图大小。

赏