输入提示的实现

最新推荐文章于 2022-10-06 19:54:33 发布

calllmq

最新推荐文章于 2022-10-06 19:54:33 发布

阅读量771

点赞数

分类专栏： javascript 文章标签： autocomplete function input class xmlhttprequest div

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在你输入的时候，输入框下面会出现一些与你输入相匹配的内容，这是一个很人性化的设计，比如Google的搜索提示。JQuery可以比较方便地实现这个功能，但是为了用这个功能而加载很多js插件，这样效率明显下降了很多，而且这个东西平时也很常用，所以用原生JavaScript写一个。

下面程序完成有以下功能：

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

程序演示：

<!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的核心部分，其各部分都有较详细的说明，代码如下：

;(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);

最后是调用的部分，调用和每个参数的部分都有说明和注意事项，再说一个其中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元素 */
    });
});

calllmq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
输入提示的实现

在你输入的时候，输入框下面会出现一些与你输入相匹配的内容，这是一个很人性化的设计，比如Google的搜索提示。JQuery可以比较方便地实现这个功能，但是为了用这个功能而加载很多js插件，这样效率明显下降了很多，而且这个东西平时也很常用，所以用原生JavaScript写一个。下面程序完成有以下功能：输入字符会把以输入字符开头的提示出来。支持上下方向键选择提示选项，支持循环。支持绑定一个
复制链接

扫一扫