码迷，mamicode.com
首页 > Web开发 > 详细

原生js自动完成 [转]

时间：2014-12-16 13:17:51      阅读：254      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   ar   io   color   os   使用   sp   

本来想用jquery的autocomplete的,可是需求有些变化,打算改源码,进了源码发现,改起来要的时间太长了,毕竟不是自己写的,改起来慢,在网上开始大肆搜罗资料,终于找到了类似的

本文转自http://www.cnblogs.com/jaiho/archive/2011/02/28/js_autocomplete.html

完成有以下功能：

  • 输入字符会把以输入字符开头的提示出来。
  • 支持上下方向键选择提示选项，支持循环
  • 支持绑定一个数组提示，支持ajax传递输入框值请求数据。
  • 支持多个选择的dom元素一块绑定数据实现输入提示。各dom元素也可以单独绑定自己的数据实现输入提示，互不影响。
  • 支持中文。

      首先是js的核心部分，其各部分都有较详细的说明，代码如下：

; (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) {
                    search = encodeURI(search);/* 解决ie中文乱码 */
                    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和在例子中将要用到的getElementsByClassName函数如下：

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 */
            });
        };
    }
})();

　　最后是调用的部分，调用和每个参数的部分都有说明和注意事项，再说一个其中source和ajax参数是二选一，如果二者都写只有source是有用的，调用代码如下：

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相同，如为字符串"[111,222,333,444]"等形式。*/
            elemCSS:{ focus:{‘color‘:‘#00ff00‘,‘background‘:‘red‘}, blur:{‘color‘:‘#ff0000‘,‘background‘:‘transparent‘} },/* 些对象中的key要js对象中的style属性支持 */
            input:‘input‘,/* 输入框使用input元素 */
            popup:‘ul‘/* 提示框使用ul元素 */
    });
});

　　完整实例:

<!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 class="autoComplete" style="z-index:18"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:17"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:16"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:15"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:14"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:13"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:12"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:11"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:10"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:9"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:8"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:7"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:6"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:5"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:4"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:3"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:2"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:1"> <input value="input" /> <ul><li></li></ul> </div>
        <div class="autoComplete" style="z-index:0"> <input value="input" /> <ul><li></li></ul> </div>
        <div style="clear:both;"></div>
        </div>
        <div style="border:3px red double;margin:15px;padding:5px;">
            <h3 style="line-height:10px;">Tip:</h3>
            <ul>
                <li>输入0、1，2会得到提示。</li>
                <li>用鼠标或上下键可以选择提示。</li>
                <li>选择点击鼠标或点回车可以选择选项。</li>
                <li>可以修改调用处，使各个输入框提示不同内容。</li>
            </ul>
        </div>
    </body>
</html>

 

原生js自动完成 [转]

标签：style   blog   http   ar   io   color   os   使用   sp   

原文地址：http://www.cnblogs.com/meitangdekafei/p/4166857.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！