`
hz_chenwenbiao
  • 浏览: 1008010 次
  • 性别: 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

    4. **suggest-yui2-min.js** - 这很可能是Kissy Suggest组件的核心脚本文件,经过压缩和优化,用于实现自动补全功能。它可能包含Suggest的初始化、数据加载、提示显示和隐藏、用户交互响应等功能的实现。 综合这些...

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

    这个组件是基于KISSY框架构建的,旨在提供高效、易用且可定制的自动补全体验,适用于网页上的搜索框或者任何需要动态建议的输入场景。 **KISSY** 是一个开源的JavaScript组件库,它提供了丰富的UI组件和开发工具,...

    Kissy Suggest 自动提示例子

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

    kissy源文件代码

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

    kissy-1.4.8.rar

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

    异步上传组件uploader基于kissy

    Uploader组件是前端开发中用于处理文件上传功能的重要工具,它基于Kissy框架,提供了一种高效、灵活且兼容性良好的解决方案。Kissy是阿里巴巴开源的一个轻量级JavaScript库,它致力于简化前端开发,提供模块化、组件...

    Web常用UI库 kissy.zip

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

    Kissy 15天学会.zip

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

    kissy最新开源包

    2. **DOM操作**:Kissy提供了丰富的DOM操作API,如选择元素、遍历节点、添加删除元素等,这些API性能优化良好,与jQuery有类似之处,但更专注于轻量化。 3. **事件系统**:Kissy的事件系统支持DOM事件和自定义事件...

    kissy 学习

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

    countdown:KISSY 的倒计时组件

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

    kissy editor 2.0

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

    基于KISSY的标签提示效果.zip

    KISSY还提供了强大的组件系统,如弹出框(Overlay)、提示框(Tip)等,这些可能被用于构建更复杂的提示效果。 KISSY的模块化特性使得代码可复用性高,开发者可以通过`use`方法按需加载所需模块,降低整体页面的...

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

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

    淘宝KISSY动画组件SnakeSlider

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

    修改的Kissy富文本编辑器

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

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

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

    top:返回顶部的kissy组件

    标题中的“top:返回顶部的kissy组件”指的是一个基于Kissy框架的JavaScript组件,它的主要功能是提供一个用户交互的方式,使用户可以方便地将页面滚动回到顶部。Kissy是一个轻量级、模块化的JavaScript库,它允许...

Global site tag (gtag.js) - Google Analytics