本文介绍JS控件autocomplete 0.11版的更新内容,重点修复了焦点移失后容器不消失的Bug。新增expandAllItem、ignoreCase及ignoreWhere等关键属性,支持ESC返回与方向键操作。针对大数据量场景,建议关闭highlighted属性以提升约40%的匹配速度,并提供了CSS美化及AJAX动态赋值的实现示例。
JS控件autocomplete 0.11版更新概览
本次更新发布于1月5日。
修复了当自动完成文本框失去焦点时,自动完成容器未能随之消失的Bug。
新增了expandAllItem方法,允许在双击时展开显示所有列表项,具体用法可参考相关示例。
增加了customStyle示例,演示如何通过修改autocomplete_custom.css文件对autocomplete控件进行CSS样式美化。
相关演示与下载链接如下:
http://www.never-online.net/code/neverModules/autocomplete/
核心功能改进与属性详解
与上一版本相比,主要改进与新增功能包括:
1. 提升了匹配速度。
2. 新增ignoreCase属性,默认为true(不区分大小写);设置为false时,将启用区分大小写的匹配模式。
3. 新增ignoreWhere属性,默认为false;设置为true时,启用贪婪匹配模式,即只要输入字符出现在整个字符串中,便将dataSource内容纳入匹配结果。
4. 支持按ESC键关闭下拉列表。
5. 兼容IE6.0、Opera9.0及Mozilla Firefox1.5浏览器。
6. 支持手动清空dataSource数据或动态赋值,便于结合AJAX使用,具体实现请参考示例代码。
7. 新增highlighted属性,默认为true;在数据量较大时,建议将其设置为false以优化性能。
8. 在IE浏览器中解决了div被select控件遮挡的问题,具体效果可参考第一个示例。
9. 增加了对键盘方向键的支持。
实现思路与性能优化建议
以下是实现思路及相关参考:
初始化阶段,将所有数据通过join("")拼接成dataSource字符串(尽量简化HTML标签以减少字符串长度),随后使用正则表达式进行匹配,这种处理方式在速度上已较为理想。
虽然尚未加入range功能,但基本功能已足够使用,整体速度表现尚可。目前发现一个性能瓶颈:若要在Opera、Mozilla和IE等不同内核中充分利用其效率,代码长度可能会显著增加,因为不同浏览器的内核执行效率存在较大差异。
兼容性与效率之间往往存在矛盾。使用insertAdjacentHTML方法是在数据量较大时插入字符串的一种简单且兼容的处理方式之一。
关于highlight(高亮)功能的加入问题,由于使用join拼接后需再次回溯以添加高亮标签,这相当于执行了两次匹配操作,从而影响了效率。因此,建议在大数据量场景下将highlighted属性设为false,理论上可将速度提升约40%。