`

自动补全

 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoComplete</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.autoComplete {margin:8px;position:relative;float:left;}
.autoComplete input {width:200px;height:25px;margin:0;padding:0;line-height:25px;}
.autoComplete ul {z-index:-12;padding:0px;margin:0px;border:1px #333 solid;width:200px;background:white;display:none;position:absolute;left:0;top:28px;*margin-left:9px;*margin-top:2px;margin-top:1px\0;}
.autoComplete li {list-style:none;}
.autoComplete li a {display:block;color:#000;text-decoration:none;padding:1px 0 1px 5px;_width:97%;}
.autoComplete li a:hover {color:#000;background:#ccc;border:none;}
</style>
<script type="text/javascript">
//<![CDATA[
var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各浏览器的选择class的方法；(写法参考了博客园：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html，想了解更多请看这个地址) */
    node = node || document, tag = tag ? tag.toUpperCase() : "*";
    if(document.getElementsByClassName){/* 支持getElementsByClassName的浏览器 */
        var temp = node.getElementsByClassName(searchClass);
        if(tag=="*"){
            return temp;
        } else {
            var ret = new Array();
            for(var i=0; i<temp.length; i++)
                if(temp[i].nodeName==tag)
                    ret.push(temp[i]);
            return ret;
        }
    }else{/* 不支持getElementsByClassName的浏览器 */
        var classes = searchClass.split(" "),
            elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
            patterns = [], returnElements = [], current, match;
        var i = classes.length;
        while(--i >= 0)
            patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
        var j = elements.length;
        while(--j >= 0){
            current = elements[j], match = false;
            for(var k=0, kl=patterns.length; k<kl; k++){
                match = patterns[k].test(current.className);
                if(!match) break;
            }
            if(match) returnElements.push(current);
        }
        return returnElements;
    }
};
var addEvent=(function(){/* 用此函数添加事件防止事件覆盖 */
    if(document.addEventListener){
        return function(type, fn){ this.addEventListener(type, fn, false); };
    }else if(document.attachEvent){
        return function(type,fn){
            this.attachEvent('on'+type, function () {
                return fn.call(this, window.event);/* 兼容IE */
            });
        };
    }
})();
;(function(window){
/* 插件开始 */
var autoComplete=function(o){
    var handler=(function(){
        var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 为每个选择的dom都创建一个相对应的对象，这样选择多个dom时可以很方便地使用 */
        handler.prototype={
            e:null, o:null, timer:null, show:0, input:null, popup:null,
            init:function(e,o){/* 设置初始对象 */
                this.e=e, this.o=o,
                this.input=this.e.getElementsByTagName(this.o.input)[0],
                this.popup=this.e.getElementsByTagName(this.o.popup)[0],
                this.initEvent();/* 初始化各种事件 */
            },
            match:function(quickExpr,value,source){/* 生成提示 */
                var li = null;
                for(var i in source){
                    if( value.length>0 && quickExpr.exec(source[i])!=null ){
                        li = document.createElement('li');
                        li.innerHTML = '<a href="javascript:;">'+source[i]+'</a>';
                        this.popup.appendChild(li);
                    }
                }
                if(this.popup.getElementsByTagName('a').length)
                    this.popup.style.display='block';
                else
                    this.popup.style.display='none';
            },
            ajax:function(type,url,quickExpr,search){/* ajax请求远程数据 */
                var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
                xhr.open(type,url,true);/* 同异步在此修改 */
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                var that=this;
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4) {
                        if(xhr.status==200) {
                            var data = eval(xhr.responseText);
                            that.match(quickExpr,search,data);/* 相同于成功的回调函数 */
                        }else{
                            alert("请求页面异常!");/* 请求失败 */
                        }
                    }
                };
                xhr.send(null);
            },
            fetch:function(ajax,search,quickExpr){
                var that=this;
                this.ajax(ajax.type,ajax.url+search,quickExpr,search);
            },
            initEvent:function(){/* 各事件的集合 */
                var that=this;
                this.input.onfocus = function(){
                    if(this.inputValue) this.value = this.inputValue;
                    var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this;
                    var els = that.popup.getElementsByTagName('a');
                    if(els.length>0) that.popup.style.display = 'block';
                    that.timer=setInterval(function(){
                        if(value!=self.value){/* 判断输入内容是否改变，兼容中文 */
                            value=self.value;
                            that.popup.innerHTML='';
                            if(value!=''){
                                quickExpr=RegExp('^'+value);
                                if(that.o.source) that.match(quickExpr,value,that.o.source);
                                else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);
                            }
                        }
                    },200);
                };
                this.input.onblur = function(){/*  输入框添加事件 */
                    if(this.value!=this.defaultValue) this.inputValue = this.value;
                    clearInterval(that.timer);
                    var current=-1;/* 记住当前有焦点的选项 */
                    var els = that.popup.getElementsByTagName('a');
                    var len = els.length-1;
                    var aClick = function(){
                        that.input.inputValue = this.firstChild.nodeValue;
                        that.popup.innerHTML='';
                        that.popup.style.display='none';
                        that.input.focus();
                    };
                    var aFocus = function(){
                        for(var i=len; i>=0; i--){
                            if(this.parentNode===that.popup.children[i]){
                                current = i;
                                break;
                            }
                        }
                        //that.input.value = this.firstChild.nodeValue;
                        for(var k in that.o.elemCSS.focus){
                            this.style[k] = that.o.elemCSS.focus[k];
                        }
                    };
                    var aBlur= function(){
                        for(var k in that.o.elemCSS.blur)
                            this.style[k] = that.o.elemCSS.blur[k];
                    };
                    var aKeydown = function(event){
                        event = event || window.event;/* 兼容IE */
                        if(current === len && event.keyCode===9){/* tab键时popup隐藏 */
                            that.popup.style.display = 'none';
                        }else if(event.keyCode==40){/* 处理上下方向键事件方便选择提示的选项 */
                            current++;
                            if(current<-1) current=len;
                            if(current>len){
                                current=-1;
                                that.input.focus();
                            }else{
                                that.popup.getElementsByTagName('a')[current].focus();
                            }
                        }else if(event.keyCode==38){
                            current--;
                            if(current==-1){
                                that.input.focus();
                            }else if(current<-1){
                                current = len;
                                that.popup.getElementsByTagName('a')[current].focus();
                            }else{
                                that.popup.getElementsByTagName('a')[current].focus();
                            }
                        }
                    };
                    for(var i=0; i<els.length; i++){/* 为每个选项添加事件 */
                        els[i].onclick = aClick;
                        els[i].onfocus = aFocus;
                        els[i].onblur = aBlur;
                        els[i].onkeydown = aKeydown;
                    }
                };
                this.input.onkeydown = function(event){
                    event = event || window.event;/* 兼容IE */
                    var els = that.popup.getElementsByTagName('a');
                    if(event.keyCode==40){
                        if(els[0]) els[0].focus();
                    }else if(event.keyCode==38){
                        if(els[els.length-1]) els[els.length-1].focus();
                    }else if(event.keyCode==9){
                        if(event.shiftKey==true) that.popup.style.display = 'none';
                    }
                };
                this.e.onmouseover = function(){ that.show=1; };
                this.e.onmouseout = function(){ that.show=0; };
                addEvent.call(document,'click',function(){
                    if(that.show==0){
                        that.popup.style.display='none';
                    }
                });/* 处理提示框dom元素不支持onblur的情况 */
            }
        };
        handler.prototype.init.prototype=handler.prototype;/* JQuery style，这样我们在处的时候就不用每个dom元素都用new来创建对象了 */
        return handler;/* 把内部的处理函数传到外部 */
    })();
    if(this.length){/* 处理选择多个dom元素 */
        for(var a=this.length-1; a>=0; a--){/* 调用方法为每个选择的dom生成一个处理对象，使它们不互相影响 */
            handler(this[a],o);
        }
    }else{/* 处理选择一个dom元素 */
        handler(this,o);
    }
    return this;
};
return window.autoComplete = autoComplete;/* 暴露方法给全局对象 */
/* 插件结束 */
})(window);
/* 调用 */
addEvent.call(null,'load',function(){
    autoComplete.call( getElementsByClassName('autoComplete'), {/* 使用call或apply调用此方法 */
            source:['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932],/* 提示时在此数组中搜索 */
            //ajax:{ type:'post',url:'./php/fetch.php?search=' },/* 如果使用ajax则远程返回的数据格式要与source相同 */
            elemCSS:{ focus:{'color':'black','background':'#ccc'}, blur:{'color':'black','background':'transparent'} },/* 些对象中的key要js对象中的style属性支持 */
            input:'input',/* 输入框使用input元素 */
            popup:'ul'/* 提示框使用ul元素 */
    });
});
//]]>
</script>
 </head>
    <body><!-- 这所以使用这么多的z-index是因为ie6和ie7的问题 -->
        <div>
        <div class="autoComplete" style="z-index:19"> <input value="input" /> <ul><li></li></ul> </div>
        </div>
 </body>
</html>

分享到：
| JS验证只能输入整数或小数
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    sublime的微信小程序代码自动补全

    sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信...

    微信小程序sublime开发工具-自动补全代码片段

    微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动...

    Wpf TextBox自动补全

    在某些应用场景中，如搜索引擎、编程环境或者数据录入界面，我们可能希望TextBox具有自动补全功能，即用户在输入时系统能根据已输入的部分文本提供匹配的建议。这可以提高用户的输入效率，并提供更友好的用户体验。 ...

    stm32cubeide自动补全插件.zip

    在给定的“stm32cubeide自动补全插件.zip”文件中，包含了一个名为“org.eclipse.cdt.ui_6.7.1.202005220422.jar”的组件，这很可能是用于增强STM32CubeIDE代码编辑器的自动补全功能的插件。 自动补全（Auto-...

    c# 文本框自动完成自动补全示例 1

    在C#编程中，"文本框自动完成"和"自动补全"功能是提升用户界面交互体验的重要元素，尤其在需要用户输入特定信息时。这个示例代码将帮助开发者实现这一功能，使得用户在文本框中输入时能够快速匹配到预设的建议列表，...

    UltraEdit实现自动补全

    UltraEdit实现自动补全 可以添加 Java PHP自动补全

    eclipse c_c++自动补全auto activation 自动激活 最新插件

    "eclipse c_c++自动补全auto activation 自动激活 最新插件"很可能指的是一个更新的、专门为Eclipse C/C++开发者设计的插件，旨在优化自动补全体验，提高激活速度和准确度。这个插件可能包含了最新的代码库，能够...

    解决Eclipse自动补全卡死的问题内附说明[【完整版】

    在编程过程中，集成开发环境（IDE）的自动补全功能是提高效率的重要工具。然而，当IDE出现性能问题，如Eclipse的自动补全卡死现象时，这将严重影响开发者的编程体验。本文将深入探讨如何解决Eclipse自动补全卡死的...

    取消eclipse mars2(4.5.2)部分按键自动补全

    该版本提供了丰富的功能，其中包括自动补全，这有助于程序员提高编码效率。然而，有时自动补全功能可能会在某些特定情况下干扰用户的编码习惯，例如在按特定键（如空格、句点、分号、括号等）时自动触发。针对这种...

    改进版 jquery 仿百度谷歌自动补全输入（支持中文）

    标题“改进版 jquery 仿百度谷歌自动补全输入（支持中文）”涉及到的是一个基于jQuery的前端开发技术，旨在实现类似百度和谷歌搜索框的自动补全功能，而且这一版本特别优化了对中文字符的支持。在网页交互设计中，...

    STM32CubeIDE_1.10.0 自动补全 与 TAB按键补全

    在1.10.0版本中，自动补全和TAB键补全功能是提升开发者效率的重要特性。 自动补全功能在编程中起着至关重要的作用，它可以智能地预测并显示可能的代码片段，减少手动输入，降低出错率。STM32CubeIDE集成的自动补全...

    STM32CubeIDE 1.15.0自动补全插件

    STM32CubeIDE的1.15.0版本引入了自动补全插件，这大大提升了开发效率，特别是在处理复杂的嵌入式系统编程时。 自动补全功能是现代编程环境中不可或缺的一部分，它能够帮助开发者在编写代码时快速输入函数、变量、类...

    设置eclipse和html和js自动补全.zip

    展开“JavaScript” -&gt; “Editor” -&gt; “Content Assist”，在这里你可以调整JavaScript自动补全的详细程度，比如是否显示函数参数提示等。同时，确保“Enabled”选项已被勾选，以启用JavaScript的自动补全功能。 ...

    c#textbox输入框自动提示、自动完成、自动补全功能

    为了提供更好的用户体验，开发者经常需要为TextBox添加自动提示、自动完成和自动补全的功能。这些特性可以帮助用户更快地输入信息，尤其是在处理长文本或者需要从预定义的数据集中选择内容时。 一、TextBox自动提示...

    Java - Ajax自动补全

    1. **Ajax自动补全的基本原理**：自动补全功能通常用于搜索框或输入字段，当用户输入字符时，服务器会实时返回匹配的数据，这些数据可以是建议的搜索词、用户列表或其他相关信息。Ajax通过异步请求在后台处理这些...

    STM32CubeIDE代码自动补全插件（纯绿色）

    STM32CubeIDE的一大亮点就是其内置的代码生成器和自动补全功能，能够极大地提高开发效率。 标题提到的“STM32CubeIDE代码自动补全插件”是一种增强STM32CubeIDE原有功能的工具，旨在进一步优化编程体验。这个插件是...

    自动补全提示（可模糊搜索）的输入框

    在IT领域，自动补全提示是一项非常常见的功能，尤其在搜索引擎和各种输入框中，它极大地提升了用户体验。本文将深入探讨如何使用JavaScript实现一个具备模糊搜索功能的自动补全提示输入框，根据提供的标题和描述，...

    中文拼写自动补全

    **中文拼写自动补全** 在信息技术领域，中文输入法的拼写自动补全功能是一项重要的用户体验提升技术。它能够帮助用户快速、准确地输入文本，尤其对于输入速度较慢或者不太熟悉汉字输入的用户来说，这个功能尤为重要...

    eclipse自动补全变量名关键字等.txt

    ### Eclipse自动补全功能详解与优化 在软件开发过程中，集成开发环境（IDE）的高效使用对于提升编码效率至关重要。Eclipse，作为一款广受欢迎的开源IDE，为开发者提供了丰富的功能，其中自动补全功能尤为突出，极大...

Magicbox
Global site tag (gtag.js) - Google Analytics