一行代码实现搜索框自动补全
搜索框提示功能可以有效降低用户输入成本,提升用户搜索体验,增加网站的用户粘性。最近我在实现一个“输入框自动提示”功能的过程中遇到了一堆问题,还写了一堆代码:前端js、ajax、后台数据库、响应速度优化等等,最后,只能前缀匹配?太low了,
看看人家百度、淘宝,能实现拼音全拼匹配、拼音首字母匹配、智能容错、模糊匹配,还能实现提示内容按权重排序,心里很不平衡!
但是,为一个小问题投入太多精力是非常不划算的。国外一家非开源站点的中文版 上提供一种省事的办法,不用数据库、不用AJAX、不用Server端编程、只需一行Javascript代码,
就能将“搜索框智能提示”功能快速加入到我的网页中。我的网站现在也获得了同百度淘宝等搜索框一样强大的输入提示功能!
同时,还可以自定义要提示的词条列表以及决定显示次序的词条权重呢。
如何实现?分两步走:
首先,请准备一个UTF-8编码的TXT文本,写入您希望提示的词条和词条权重,这个简单。
比如,我是一个电影视频网站站长,准备好一个包含电影名称的txt文本(好吧,我是小站,只有五部电影)
潘多拉的救赎,2
这个男人来自地球,163
这个杀手不太冷,888
肖申克的救赎,2000
唐朝好男人
词条和权重之间用一个英文逗号分隔,词条字符长度不能超过49,权重最小是0,最大是2147483647
其中一个电影名称是没有带权重的,系统自动默认为最小值。
当用户在输入框中键入“男人”,搜索框提示列表如下:
这个男人来自地球
唐朝好男人
当用户在输入框中键入“jiushu”,搜索框提示列表如下:
肖申克的救赎
潘多拉的救赎
当用户在输入框中键入“这个”,搜索框提示列表如下:
这个杀手不太冷
这个男人来自地球
当用户在输入框中键入“堂超”,搜索框提示列表如下:
唐朝好男人
然后,只要下面的三步,短短三五分钟,就可以立即开通搜索框智能提示功能
第一步 在www.上免费获取一个ServiceKEY,比如MyKEY
第二步 为需要添加搜索框提示功能的<input>标签添加HaoyuSug属性。例如下面:
<input type="text" name="word" HaoyuSug="MyKEY">
第三步 在网页中引入Javascript文件,只需一行代码:
<script charset="UTF-8" src="http://www.
这里需要特别强调的是:嵌入的一行Javascript代码位置是非常有讲究的!必须放置在</body>标签的后面!
SmartAutocomplete搜索框输入提示功能采用闭包设计,不会污染原有页面代码,因此不会影响你页面中的原有功能。为了防止功能冲
突,如果你的搜索框已经绑定了其他提示功能,请先取消原有功能后再绑定“SmartAutocomplete搜索框提示”功能。
你网页中的任何INPUT输入框均可使用SmartAutocomplete提供的智能提示功能
各大搜索引擎也提供类似的输入提示功能,可他们的提示数据,是基于词条全网的使用情况,很可能不适合我自己的网站
比如我是一个做食谱的网站,他是一个做视频动画的网站,
用户同样输入“lb”
食谱网站期望提示一个“萝卜”,视频站也许更期望得到一个“蜡笔小新”