提示补全组件:Kissy Suggest
去年针对谷歌的搜索提示,发过一篇文章:从谷歌的一个Bug说起,谈谈键盘事件的兼容性。从那时开始,就一直想写一个适应中国本土环境的提示组件。
前不久做淘宝首页的性能优化,淘宝原来用的是 YUI AutoComplete, 但因其庞大的体积(压缩后 30k, 还需依赖 30k 的 datasource 组件),同时对中文输入法的支持不好(这是英美人士永远难以发现的 bug),使得 YUI AutoComplete 显得很鸡肋。这次做性能优化,索性重写了一个提示组件,目标是精简够用,适应本土环境。

重写后的组件压缩后约 10k, 仅依赖 YUI2 的 yahoo-dom-event. 目前在淘宝已全面应用一个多月。现在开源出来,希望能对需要此功能的兄弟们有所帮助。源码地址:
http://kissy.googlecode.com/svn/trunk/src/suggest/
suggest-yui2.js 是源码,test.html 是测试页面,demo.html 是实例,demo-google.html 是利用该组件给谷歌恢复搜索提示的小玩意。如果在项目中真实使用,需要加载以下两个文件:
http://kissy.googlecode.com/svn/trunk/lib/yui2/yahoo-dom-event.js http://kissy.googlecode.com/svn/trunk/build/suggest/suggest-yui2-min.js
可以很自信地说:这个组件目前无论在细节还是性能上,都是数一数二的。
欢迎试用和有效的建议。
PS:很感慨 Google 的产品,精致小巧,非常注意细节。Google 英文首页的搜索提示,看似简单,但极不简单。对键盘和鼠标等事件的细节处理上,没有看到比 Google 做得更好的。Kissy Suggest 在交互细节上基本上做到了和 Google 的一样,同时增加了对本土输入法的支持。

July 18th, 2009 on 14:12
好东西啊
July 18th, 2009 on 14:53
demo 是不是有沙箱的问题?都看不到效果……
July 18th, 2009 on 15:41
原来这个组件是你写的.确实写的不错.越小的东西其实越讲究.面面俱到.
一个AutoComplete会牵扯很多js的技巧.
July 18th, 2009 on 16:00
@kavin: 忘了加 svn 的 mimetype, 现在已经好了,感谢反馈。
July 18th, 2009 on 22:34
以前俺也做过一个,后来看了射雕兄那篇文章做了改进
非常感谢射兄
July 18th, 2009 on 23:08
看了demo,“淘宝首页的搜索提示” 明显比别的几个好,特别是对IME状态的处理。
July 19th, 2009 on 0:01
正是我想要的!前几天也在研究这个东西,郁闷的是搞不懂google和taobao的搜索框怎么还能探测到拼音输入法待选时的字符,后来发现在FireFox上才可以(其他几个标准浏览器也可以),就IE上不行。
July 19th, 2009 on 0:11
把在公司写的code放出来不会有问题吗?
July 19th, 2009 on 2:26
三个建议:
1. 头部定义的部分常量感觉意义不大,如果是为压缩考虑,那么不如
VISIBILITY = ‘visibility’;
Dom.setStyle(el, VISIBILITY , HIDDEN),因为visibility用到了7次。
requestData 逻辑较复杂,我觉得可以参照YUI的做法,用三元操作符实现针对不同浏览器定义不同函数。
字符串用单引号:)
July 19th, 2009 on 10:15
建议:
1. 获取data的方式可以做一个config,并不是所有的suggest都是跨域的
2. 过期数据也是有意义的,用户可能在关键词输入时做一些前进后退,因此统统存起来,可以用查询条件做键
July 19th, 2009 on 11:51
感谢小马的建议^o^
July 19th, 2009 on 12:21
@feng: 非常感谢你的建议!
July 19th, 2009 on 15:22
@lifesinger
可以把前台的回调curry一个id缓存起来,这样返回的时候就能查到query条件了。并不需要借助后台实现接口
July 19th, 2009 on 20:48
狂赞啊!
可惜淘宝都用YUI哦。要是能有jQuery版本就好了。
真想port一个jQuery的插件出来,可惜水平不够~
July 19th, 2009 on 23:15
那个demo-google.html在我的IE6下不能运行
July 20th, 2009 on 0:43
Firefox 3.5下看了下,好像并不完美:
1.方向键应该单独处理,按方向键并不需要筛选数据(夜深了,没看代码,demo体验时有时会明显感觉到按方向键不能聚焦结果集的某行,另外每换一行都会请求服务器?)。
2.另外启用Google拼音输入法(内嵌编辑模式),反应并不是很灵敏。
3.个人不喜欢在按方向键选中的同时更新输入框的值。
总体体验感觉有点粗糙。
另外ie7下体验了下暂时未出现上面说的问题,希望不是我的rp问题。
July 20th, 2009 on 8:53
@闲耕:我的也是 firefox 3.5, 没发现你说的问题哦。 对于第 3 点,萝卜白菜各有所爱,我觉得 google 的方式是不错的,体现的是“补全”功能,让用户在操作时,能预知效果。
July 20th, 2009 on 10:03
竟然没有用yui3做
July 20th, 2009 on 20:14
呵呵,不错,
抽时间也去写一个~~
July 21st, 2009 on 10:19
非常实用的功能,感谢分享。。
July 22nd, 2009 on 11:01
强大,我前些天自己写了一个,只满足 Test Cases 的1-5、8、9、11、15这几条。
不得不讲淘宝团队的分享精神是最好的。
July 26th, 2009 on 17:07
非常不错,是我们学习的典范。
July 28th, 2009 on 12:30
注释和代码结构非常值得学习,谢谢你的无私奉献呵
August 4th, 2009 on 17:31
在ASP.NET 页面也就是.aspx页面下面居然无法使用 把页面改为.html
就可以使用
August 9th, 2009 on 16:03
你好,有个很急的问题想请教你一下,对于提示的列表,我想加个滚动条,但是加了滚动条后ie下无法拖动,是为什么呢?
August 9th, 2009 on 22:19
@万峰:我试了下,ie下的确有这个问题,需要 hack 才能实现鼠标拖动滚动条。最简单的是将 suggest-container 再包裹一层 div. 你试下。
August 10th, 2009 on 10:51
我测试下来,发现是因为这个事件:onbeforedeactivate,如果在外面再包裹一层div,事件还在container作用域上的时候,新包裹的div在onblur还是hide。不过还是谢谢你!
August 12th, 2009 on 22:15
呃。。。。。。。
偶抄了个jquery版的出来,呵呵。
http://pzling.com/2009/08/jq-plugin-suggest/
September 9th, 2009 on 0:00
你好,对于此问题你能和我联系一下我请教你几个问题吗?
January 18th, 2010 on 23:20
楼住,你好,我使用了你的提示补全组件,我做了下修改,就是在输入框获得焦点的时候,发送请求,服务器返回默认的一个结果集,现在返回成功,提示层也显示出来了。
现在的问题是:
1、如果这时(即输入框没有输入任何内容时)移动鼠标,当鼠标移到某一项时,那项的背景颜色改变,不过是闪了一下,背景颜色又变回来原来那样(也就是没有背景颜色)
(注意,这时该项的确已经应用了selected样式,即执行了_setSelectedItem函数)
2、如果这时点击“关闭”按钮,提示层并不能关闭,这个我想这是因为输入框还处于获得焦点的情况
对于这些问题,能否给与相应的一些解决思路
PS:对于输入框获得焦点时,便显示提示层,这种需求在很多场合下的确是需要的
leave a reply