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

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%左右的速度。

赞 (0)

相关推荐

  • Autocomplete Textbox Example javascript实现自动完成成功

    复制代码 代码如下: <SCRIPT language=JScript type=text/javascript>  var isOpera = navigator.userAgent.indexOf("Opera") > -1;  var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;  var isMoz = navigator.userAgent.i

  • JS实现的一个简单的Autocomplete自动完成例子

    分享一篇无意间发现的自动完成源码.这里测试的时候使用的是数组,实际使用的时候,我们换成Ajax从服务器端获取的方式就OK了. 提示:可以直接保存到一个html文件中查看效果. 复制代码 代码如下: <!doctype html><html><style>body {    margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;}.auto_hidden {   

  • 引入autocomplete组件时JS报未结束字符串常量错误

    就我的问题以及解决办法: 我在引入jQuery的autocomplete组件时,遇到js报未结束字符串常量错误. 原因分析:首先,右击页面查看编码是utf-8, 其次,查看js报错的函数,以及找到对应的函数. 发现原来jQuery.autocomplete.js中的感叹号为中文的即!将其修改为英文的!,出错问题解决.

  • 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平. 说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路. 为输入框添加input事件 1.inpu

  • jquery.AutoComplete.js中文修正版(支持firefox)

    复制代码 代码如下: jQuery.autocomplete = function(input, options) { // Create a link to self var me = this; // Create jQuery object for input element var $input = $(input).attr("autocomplete", "off"); // Apply inputClass if necessary if (optio

  • JS 自动完成 AutoComplete(Ajax 查询)

    JS 自动完成 AutoComplete(Ajax 查询)

    一:JS 部分 复制代码 代码如下: //******************************************************** //创建日期: 2009-03-10 //作 者: oloen //內容说明: 自动完成JS类 //用法: // var auto = new autoComplete(客户端ID); // auto.Init(document.all.客户端ID); // auto.Type = 'PSUnit' //PSSale //**********

  • 原生js编写autoComplete插件

    最近有提关于下拉选项过多的时候,希望输入关键词,可以搜索内容的需求,但是之前项目太赶,所以也就没有来得及做,因为希望用原生js写一些内容,所以插件是采用了原生js写的思路如下 第一步:fnInit实现初始化一些字段 第二步:加载搜索框的div 第三步:实现search功能,删除原节点并加载新节点 第四步:点击或者回车的时候设置value 代码: autoComplete.js /** * @summary AutoComplete * @description 输入框自动检索下拉选项 * @ve

  • 基于jquery的文本框与autocomplete结合使用(asp.net+json)

    JS脚本引用 复制代码 代码如下: <script src="/scripts/Jquery.autocomplete/jquery.autocomplete.js" type="text/javascript"></script> 样式引用 复制代码 代码如下: <style type="text/css" media="all"> @import url("/scripts/J

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

    1月5日已更新 修复自动完成文本框焦点移失,自动完成容器不能消失的bug 增加expandAllItem方法,双击时可出现全部的item,详情请看示例 增加customStyle示例,该示例演示了如何对autocomplete控件进行css美化,见autocomplete_custom的css文件 演示及下载: http://www.never-online.net/code/neverModules/autocomplete/ 功能较上一版本的改进和功能: 1.匹配速度的提高. 2.加入ign

  • JS控件的生命周期介绍

    JS控件的生命周期介绍

    JS控件的生命周期跟其他平台UI的生命周期类似,但是又有自己的特点,我们只有将控件的生命周期划分清晰,所有的控件编写.mixins的编写和plugin的编写才能遵循控件的生命周期做统一的管理.在这里我把JS的生命周期定义为4部分: 1.initializer: 初始化,做一些不牵扯DOM操作的初始化操作 2.createDom: 创建 DOM,在这个过程中我们创建控件需要的DOM结构 3.renderUI: 生成控件的内部元素,在这里调用子控件的渲染方法,开启子控件的生命周期 4.bindUI:

  • JS 控件事件小结

    概述: 事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于JS控件来说有一些麻烦需要解决,JS类本身不支持事件,DOM模型支持的事件仅适应于浏览器的DOM节点.所以创建一套事件是我们写控件之前要做的. 事件机制 对于事件的机制我不想多说,各种语言中对事件的描述都很具体,都是观察者模式的一种实现,我们可以从中抽取出事件必须的接口(由于控件库是基于jQuery 所以接口跟jquery保持一致): 1.on: 绑定事件 2.off: 删除事件 3.fire: 触发事件 4.add

  • 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

    如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> funct

  • 日期 时间js控件

    复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s

  • JS控件bootstrap datepicker使用方法详解

    JS控件bootstrap datepicker使用方法详解

    bootstrap-datepicker沙箱环境: bootstrap-datepicker沙箱环境: 1.requirejs配置 requirejs.config({ baseUrl: '../pages/modules', // urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除 urlArgs:'v=2016110701', paths: { jquery: ["../../plugins/jquery/jquery

  • JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子

    先扯点题外话^_^从注册时间来看,我是个老经典人,但是从发帖数来看同时我又是个新经典人.说起来倒是很巧的一件事,我在经典和无忧上注册的时间居然是同一天!2005-8-16,我依稀记得的是,当时注册经典是要下载一个东西.之后就一直在无忧上游荡,偶尔冒起来问几个问题.两年时间,问过不少弱智问题,也解答过一些问题.偶也在无忧的陪伴下从一个小菜鸟变成了一个老菜鸟.近段时间看过的几篇好文章都是经典里出的.记得其中一篇就是子虚乌有大大的杰作.我开始关注经典...最近发现无忧人气在下滑,不知道是我主观感觉还是

  • JS控件bootstrap suggest plugin使用方法详解

    JS控件bootstrap suggest plugin使用方法详解

    本文为大家分享了bootstrap-suggest-plugin插件,这是一个简单的编辑提示控件,供大家参考,具体内容如下 bootstrap-suggest-plugin插件地址 页面如下面所示,使用此控件 <div class="form-group"> <label class="col-xs-3 text-right control-label">库管员:</label> <div class="col-x

  • Android 实现IOS 滚轮选择控件的实例（源码下载）

    Android 实现IOS 滚轮选择控件的实例（源码下载）

     Android 实现IOS 滚轮选择控件的实例 最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀上,进行了一些小调整. 这里先贴上效果图 一般常用的时间选择格式,,单项选择,以及城市联动,这里基本都可以满足了. 这里把 单项选择,和 日期时间选择 给提出到 Util 类中,代码如下: public class Util { /** * 时间选择回调 */ public interface TimerPickerCallBack

  • js控件Kindeditor实现图片自动上传功能

    js控件Kindeditor实现图片自动上传功能

    Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复

随机推荐