JS控件autocomplete 0.11演示及下载 1月5日已更新


Posted in Javascript onJanuary 09, 2007

1月5日已更新

修复自动完成文本框焦点移失,自动完成容器不能消失的bug
增加expandAllItem方法,双击时可出现全部的item,详情请看示例
增加customStyle示例,该示例演示了如何对autocomplete控件进行css美化,见autocomplete_custom的css文件

演示及下载:
http://www.never-online.net/code/neverModules/autocomplete/

功能较上一版本的改进和功能:
1。匹配速度的提高。
2。加入ignoreCase属性(为false时,将区分大小写,默认为true)
3。加入ignoreWhere属性(为true时,匹配结果将使用贪婪匹配,即整个字符串中只要有输入的字符,将把dataSource内容送入匹配结果中)
4。按esc返回。
5。兼容IE6.0, Opera9.0, Mozilla Firefox1.5
6。可手动清空dataSource数据,或动态赋值给dataSource。方便的进行AJAX,详细请看示例。
7。highlighted属性(默认为true,大数据量时,建议设置为false)。
8。在IE中,弥补div被select控件遮挡。详细请看第一个示例。
9。方向键支持。

思路以及参考:

初始化时,我把所有的数据都一次用join("")生成dataSource字符串(我在字符串字使用的html都尽量的简短,使之能够以最少的字符串生成数据),之后用正则来匹配。感觉这已经在速度上是很快的了。

虽然range功能还没有加进去,但基本的已经足够了。速度还算理想。现在发现一个速度问题就是,如果要在Opera,Mozilla,IE里充分利用其内核的效率,那么结果将是代码也许会大大的加长。毕竟不同内核之间的效率是大不一样的。

兼容性与效率同样也是一个矛盾的问题。用insertAdjanceHTML这个方法,是在大数数量情况下,插入一个字符串的一个简单兼容方法之一。

还有一个就是把highlight加入的问题,用了join之后,要加亮,必须再次回溯,从而相当于进行了两次匹配。这个也是效率的问题之一。所以建议大数据量情况下,把highlighted属性设为false。这样效率理论上说,应该可以提高40%左右的速度。

Javascript 相关文章推荐
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
js实现3D旋转相册
Aug 02 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
根据分辩率调用不同的CSS.
Jan 08 #Javascript
如何用javascript判断录入的日期是否合法
Jan 08 #Javascript
[IE&FireFox兼容]JS对select操作
Jan 07 #Javascript
javascript中的对象和数组的应用技巧
Jan 07 #Javascript
JavaScript For Beginners(转载)
Jan 05 #Javascript
JavaScript的目的分析
Jan 05 #Javascript
关于JavaScript的gzip静态压缩方法
Jan 05 #Javascript
You might like
PHP Token(令牌)设计
2008/03/15 PHP
浅析PHP绘图技术
2013/07/03 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python restful框架接口开发实现
2020/04/13 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Python基于内置函数type创建新类型
2020/10/22 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
简历中求职的个人自我评价
2013/12/03 职场文书
运动会演讲稿100字
2014/08/25 职场文书
学生打架检讨书
2014/10/20 职场文书