`
hz_chenwenbiao
  • 浏览: 994924 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

更强的自动补全提示:提示补全组件:Kissy Suggest(转)

阅读更多

去年针对谷歌的搜索提示,发过一篇文章:从谷歌的一个Bug说起,谈谈键盘事件的兼容性。从那时开始,就一直想写一个适应中国本土环境的提示组件。

前不久做淘宝首页的性能优化,淘宝原来用的是 YUI AutoComplete, 但因其庞大的体积(压缩后 30k, 还需依赖 30k 的 datasource 组件),同时对中文输入法的支持不好(这是英美人士永远难以发现的 bug),使得 YUI AutoComplete 显得很鸡肋。这次做性能优化,索性重写了一个提示组件,目标是精简够用,适应本土环境

suggest.png

重写后的组件压缩后约 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 的一样,同时增加了对本土输入法的支持。

 

附件是使用实例。

分享到:
评论

相关推荐

    提示补全组件:Kissy Suggest

    NULL 博文链接:https://leon1509.iteye.com/blog/436009

    KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例

    KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例!值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    Kissy Suggest 自动提示例子

    NULL 博文链接:https://nopainnogain.iteye.com/blog/838608

    kissy源文件代码

    淘宝发布开源编辑器:...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件,目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件。

    异步上传组件uploader基于kissy

    异步上传组件uploader基于kissy,拥有flash,iframe,html5三种方式

    淘宝KISSY动画组件SnakeSlider

    KISSY“轮播组件”,用于滚动展示图片,例如:焦点图。 引用了KISSY框架 SnakeSlider是一个可定制复杂动画的轮播组件,支持在切换显示/隐藏切片时分别显示不同动画,基于LayerAnim组件实现动画效果。

    n-guide:KISSY的一个插件,用于新手引导

    这是一个基于KISSY的新人引导组件,当用户第一次访问,或用户多次访问但未销毁引导功能的时候页面会出现一个引导浮层。用户可以点击“上一个”、“下一个”、“跳过”、“完成”,四个按钮操作复层,点击右上角的...

    kissy_editor

    KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让...目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。

    generator-kpm:kissy gallery工具2.0

    a yeoman generator for kissy-gallery install 安装yeoman npm install yo grunt-cli -g 安装kissy-gallery目录生成器 npm install generator-kpm -g 生成组件目录 比如你的组件目录是offline,进入该目录,然后...

    countdown:KISSY 的倒计时组件

    countdown 版本:1.3 教程: demo: changelog V1.3 [!]

    kissy 框架

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。

    tb-video-player:淘宝视频播放器KISSY组件

    tb-video-player 版本:1.5 教程: demo: changelog V1.5 修复一个页面上有多个播放器同时存在...兼容KISSY1.2.0及以下; V1.2 container支持DOM和Node对象; V1.1 增加视频封面配置项; 修复部分bug。 V1.0 首次发布

    淘宝KISSY前端开发框架

    KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and ...KISSY具备模块化、高扩展性、组件齐全等特性。

    kissy-xtemplate:用于 KISSY 的独立 XTemplate 编译器

    亲吻xtemplate 用于 KISSY 的独立 XTemplate 编译器用法节点 var XTemplate = require ( 'kissy-xtemplate' ) ;new XTemplate ( ) . compileSync ( 'xxx.xtpl.html' , 'xxx.xtpl.js' ) ; 或使用异步版本: var ...

    Web常用UI库 kissy.zip

    Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...

    top:返回顶部的kissy组件

    top版本:1.0.0教程:demo:changelogV1.0.0[!]

    kmc:kissy的模块编译器

    模块编译器简介KISSY Module Compiler(kmc)是一个基于NodeJS的KISSY模块打包工具,目前适用于KISSY 1.2+的代码打包如果您有任何问题,请邮件或者来往(daxingplay)上联系我,阿里巴巴厂内用户还可以联系紫英。...

    KISSY 1.4.8

    KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架

Global site tag (gtag.js) - Google Analytics