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