openSug.js

据数据统计，有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代码

---------------------------华丽的分割线---------------------------
第二种是可以通过对"百度搜索框提示"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文件：

首次投稿，如有写得不好，还请多多指点，更多关于建站、SEO的干货请浏览我的博客吧，也可以加QQ群讨论，谢谢。

openSug.js

下载量 : 10 | 类型 : 文本文件

免费下载