让openSug为我的博客园搜索体验打call
据数据统计,有80%的用户在浏览我的网站时搜索时使用了搜索框提示功能,这至少节省了用户至少30%的输入成本。本次就来分享下如何在网站引入百度搜索框提示免费代码openSug.js功能来提升用户输入体验,增加网站的用户粘性。
经过测试,百度搜索框下拉提示支持HTTPS加密,即使用了SSL。[详见关于openSug.js全面支持HTTPS网络请求]
那么什么是"百度搜索框提示"?就是我们在百度搜索框搜索关键词时,会在搜索框下拉列表中显示相似的关键词,这功能其他搜索引擎也有,只是别的搜索引擎并没有类似openSug.js的代码出来。
我们都知道输入框一般都是下面这样子的代码或者类似的代码:
<input type="text" style="padding:.3rem;" />
<input type="text" style="padding:.3rem;" />
我们只需在原来的input里添加一个参数:baiduSug即可。
<input type="text" style="padding:.3rem;" baiduSug="2" />
是不是很简单呢?下面一起来进入主题吧。
值得一提openSug.org封装了谷歌、微软Bing、俄罗斯Yandex、360好搜、酷狗音乐、优酷视频、淘宝购物等结果源,我们很方便地更改到别的搜索引擎。
如需使用百度、谷歌、微软Bing、俄罗斯Yandex、360好搜、酷狗音乐、优酷视频、淘宝购物等其他结果源时请在</head>前定义
var _source = "google | haoso | kugou | yahoo | yandex | youku | taobao";
openSug有两种方法:
第一种是比较简单的:
第一步只为有需要添加"百度搜索框提示"功能的<input type="text" />标签添加baiduSug属性就可以了,例如:
当设置baiduSug=1时,用户选中词条时默认执行表单提交动作.
当设置baiduSug=2时,用户选中词条时不执行表单提交动作.
当然,如果你的网页中有多个输入框需要添加"百度搜索框提示"功能,只要在每个输入框都加上baiduSug属性就可以的。
最后,别忘了在网站的</body>前面添加Javascript代码
<script type="text/javascript" src="https://opensug.github.io/js/opensug.js"></script>
---------------------------华丽的分割线---------------------------
第二种是可以通过对"百度搜索框提示"API自定义openSug.js参数,这要求对网站风格要求的推荐使用这种方式实现网站风格一致性[百度搜索下拉参数在线生成请访问https://www.opensug.org/?n=api]
BaiduSuggestion.bind('inputObj', {
"XOffset": "-1",
"YOffset": "-6",
"width": "",
"fontColor": "#FF0000",
"fontColorHI": "#0000FF",
"fontSize": "28px",
"fontFamily": "Microsoft YaHei",
"borderColor": "#008000",
"bgcolorHI": "#FF6600",
"sugSubmit": true
});
下面,我们来看看是如何通过对"百度搜索框提示"API来实现网站风格统一,
这个参数XOffset是设置提示框位置横向偏移量,单位px,正傎向左偏移。
而YOffset这个参数则是控制提示框位置纵向偏移量,单位也是px,正值则向上偏移。
width这比较容易理解,从字面上是提示框宽度,单位px,留空则继承原输入框宽度。
fontColor是控制下拉提示框文字的颜色。
fontColorHI则是控制提示框鼠标经过时高亮选择文字的颜色。
fontSize则是控制文体大小。
fontFamily是指定使用的字体。
borderColor是控制下拉提示框的边框颜色。
bgcolorHI是控制提示框鼠标经过时高亮选择的背景颜色
sugSubmit用来控制选中提示框中词条时是不是自动提交表单,这个只能设置为true和false。
站长之家下载里有直接生成百度搜索下拉框提示的程序:http://down.chinaz.com/soft/39058.htm
了解了"百度搜索框提示"API是不是很容易就能打造一个和百度一样的搜索框下拉提示呢?,赶快试试吧。
最后,还是别忘了在网站的</body>前引入Javascript文件:
<script type="text/javascript" src="https://opensug.github.io/js/opensug.js"></script>
首次投稿,如有写得不好,还请多多指点,更多关于建站、SEO的干货请浏览我的博客吧,也可以加QQ群讨论,谢谢。