H

© H | Powered by LOFTER

【代码】轻量的可高度定制的Ajax版Google自定义搜索

【代码】高度定制的Ajax版Google自定义搜索
一直以来用的Google自定义搜索都是由Google提供的code(老肥的博文之前有介绍)
需要载入的内容变得非常多,默认也会显示很多广告和许多我们不需要的东西。只能通过CSS进行隐藏,相当不Geek!
于是今天把这东西补完,直接悬浮一个窗口在搜索框下面,无需页面的跳转就可以完成搜索
尝试请注目blog右上角的搜索框或者 这里

我要如何使用它?
在使用之前请先在 google自定义搜索管理页面新建一个项目

首先确认html部分的布置, 其中3个id部分勿更改 其余自己看情况
<form method="get" id="s_f" action="/">
<input type="text" id="s" name="s" value="" placeholder="输入内容回车进行搜索" autocomplete="off">
</form>
<ul id="s_d" class="o"></ul>

 
javascript部分请从 这里 获取相应部分

然后搜索其中的如下code替换成自己的Google自定义搜索ID
007641099085394688415:y6tusklcm5c

然后对相应的标签设定需要的样式

#s_f //搜索框的form
#s //搜索框的input
#s_d //显示搜索结果的ul
#s_d li //一个搜索结果
#s_d a //搜索结果的标题
#s_d p //搜索结果的内容
#s_d b //搜索结果的高亮关键字
#s_d span //搜索结果已格式化的url显示
#s_d .s_m //加载更多的链接


于是,在页内就可完成搜索并且样式可高度自定义的Google自定义搜索就完成了.
 
有问题和建议请留言~
评论 ( 21 )