`

提示补全组件:Kissy Suggest

    博客分类:
  • java
阅读更多

转自 http://www.iteye.com/topic/428485

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

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

a

重写后的组件压缩后约 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(转)

    本文将重点介绍一种强大的自动补全提示组件——Kissy Suggest,它是一个基于JavaScript的开源工具,适用于各种前端项目。 Kissy Suggest是Kissy框架的一部分,Kissy是一个轻量级的前端JavaScript库,旨在简化Web...

    Kissy Suggest 自动提示例子

    总之,Kissy Suggest 是一个强大且灵活的前端自动提示组件,通过巧妙地结合数据源、渲染和事件处理,实现了高效的输入提示。对于任何需要提升输入体验的 Web 应用,Kissy Suggest 都是一个值得考虑的选择。

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

    **KISSY.Suggest** 是一个JavaScript库,用于实现类似于百度和淘宝的输入提示补全功能。这个组件是基于KISSY框架构建的,旨在提供高效、易用且可定制的自动补全体验,适用于网页上的搜索框或者任何需要动态建议的...

    kissy-1.4.8.rar

    3. **组件丰富**:Kissy 提供了一系列的内置组件,如 AJAX、DOM 操作、事件处理、动画效果等,这些组件经过精心设计和优化,可以快速构建出功能完备的前端应用。 4. **高性能**:Kissy 通过代码压缩、合并以及异步...

    kissy源文件代码

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

    kissy最新开源包

    Kissy是最新的开源框架,由淘宝团队开发,它是一个针对前端开发者设计的JavaScript和CSS框架。这个框架的主要目标是提供一套高效、灵活且易于使用的工具,以帮助开发者快速构建前端应用。Kissy的名字来源于“简单...

    Web常用UI库 kissy.zip

    Kissy 是一个由淘宝开发并开源的JavaScript库,它的设计目标是为Web开发者提供一套全面、强大且易用的UI组件。Kissy 的出现旨在简化Web应用的开发过程,提高开发效率,尤其在构建复杂的前端界面时表现出强大的优势。...

    Kissy 15天学会.zip

    4. **丰富的组件**:Kissy 提供了一系列实用的组件,如DOM操作、事件处理、Ajax请求、动画效果等,覆盖了前端开发的多个方面,可以帮助开发者快速构建复杂应用。 5. **工具链支持**:Kissy 配套有构建工具,如Gulp...

    KISSY 小巧灵活、简洁实用的 UI 类库.zip

    1. **组件化开发**:KISSY 提供了一套完善的组件体系,允许开发者将 UI 组件进行模块化封装,通过组合这些组件来构建复杂的用户界面。这使得代码结构更加清晰,易于维护和扩展。 2. **事件系统**:KISSY 引入了事件...

    kissy 学习

    Kissy 提供了一种模块化的解决方案,使得开发者能够更好地组织和管理他们的代码,同时提供了丰富的组件来支持日常的Web开发任务。在这个"Kissy 学习"资料包中,我们可以通过"Kissy一些功能介绍.xlsx"和"demo"来深入...

    imagezoom:KISSY 图像放大

    4. **性能优化**:作为KISSY的一个组件,imagezoom可能利用了KISSY的模块加载机制,只在需要时加载资源,减少了不必要的网络请求,提高了页面加载速度。 5. **API控制**:imagezoom可能提供了丰富的API接口,允许...

    kissy editor 2.0

    1. **Kissy框架**:Kissy Editor 2.0基于Kissy JavaScript库构建,Kissy是一个轻量级、模块化的前端开发框架,提供了一套完整的组件化开发方案,使得编辑器具有良好的性能和稳定性。 2. **DOM操作**:利用Kissy的...

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

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

    countdown:KISSY 的倒计时组件

    **KISSY 倒计时组件详解** KISSY 是一个开源的 JavaScript 库,旨在简化 Web 开发,提供了一套完整的模块化解决方案。在 KISSY 中,`countdown` 是一个实用的倒计时组件,适用于各种需要显示时间剩余的应用场景,如...

    修改的Kissy富文本编辑器

    "修改的Kissy富文本编辑器"是一款基于Kissy框架的增强型文本编辑器,它在原生的Kissy Editor基础上进行了定制和优化,旨在提供更丰富的功能和更好的用户体验。Kissy是一个轻量级的JavaScript库,专注于前端开发,而...

    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,进入该目录,然后...

    task-kmc:KISSY 模块编译器

    任务-kmc KISSY 模块编译器。“kmc”任务使用示例 var kmc = new ( require ( 'task-kmc' ) )kmc . run ( inputs , options , logger )选项选项名称类型: path 包裹名字。选项文件类型: string src 文件。选项....

    kmc:kissy的模块编译器

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

Global site tag (gtag.js) - Google Analytics