输入框自动完成(ajax+asp)键盘操作只得到undefined

代码如下：

var AutoComplete = {
    "opts":{                            //配置一些参数,
        "width":"",                     //宽度为空时与input框为准
        "height":"40px",                //不是自动高度模式下此值有效
        "autoHeight":true,              //设置是否为自动高度模式
        "border":"1px solid #000",      //设置自动完成提示容器div的边框样式
        "background":"#EEE",            //设置自动完成提示容器div的背景样式
        "on_background":"yellow",       //设置自动完成提示容器高亮选项的背景样式
        "off_background":"#EEE"         //设置自动完成提示容器非高亮选项的背景样式
    },
    "serv":"",                           //服务地址
    "input":null,                        //使用自动完成的input框
    "pop":null,                          //自动完成的提示容器
    "ul":null,                           //提示内容ul
    "activeLi":1,                        //高亮的提示内容项
    "setActive":function(obj){           //设置高亮
        var me = this;
        obj.style.background = me.opts.on_background;
    },
    "setNormal":function(obj){            //取消高亮
        var me = this;
        obj.style.background = me.opts.off_background;
    },
    "doo":function(input,servUrl,event,callback,_opts){      //启用自动完成主函数
            
        if(servUrl == ""){return}                            //没有服务地址,返回

        var me = this;
        me.input = input;
        me.serv = servUrl;
        if(_opts){                                            //对参数进行配置
            for(name in _opts){
                me.opts[name] = _opts[name];
            }
        }
        
        if(!me.pop){me.buildPop()}                            //初始化提示框
        me.input.onblur = function(){me.resetPop()}           //输入框失去焦点时关闭提示框

        var event = event || window.event;
        var eventCode = event.keyCode ? event.keyCode : event.which;	//根据事件响应不同操作
        if(eventCode==38 || eventCode==40 || eventCode==13){
                if(!me.ul || me.pop.style.display == "none"){return}
                var l = me.ul.length;
                if(eventCode==40){
                    me.setNormal(me.ul[me.activeLi]);
                    me.activeLi ++;

                    if(me.activeLi > l-1){me.activeLi = 0;}
                    me.setActive(me.ul[me.activeLi]);
                    me.updateName(me.ul[me.activeLi].childNodes[0].innerHTML);
                }

                if(eventCode==38){
                    me.setNormal(me.ul[me.activeLi]);
                    me.activeLi --;
                    if(me.activeLi < 0){me.activeLi = l-1;}
                    me.setActive(me.ul[me.activeLi]);
                    me.updateName(me.ul[me.activeLi].childNodes[0].innerHTML);
                }

                if(eventCode==13){
                    me.resetPop();
                    if(callback && callback != ""){callback()};
                }
        }else{
            if (input.value.length > 0){
                var url = (me.serv.indexOf("?") == -1 ) ? (me.serv +"?key="+ input.value) : (me.serv +"&key="+input.value);
                var request = me._xmlHttp();                
                request.open("post",url,true);
                request.onreadystatechange = function(){
                    if (request.readyState == 4) {
                        if (request.status == 200){
                            var nameStr = request.responseText;
                            var names = [];
                            if(nameStr.indexOf(",") == -1){
                                if(nameStr.length > 0){names[0] = nameStr}
                            }else{
                                names = nameStr.split(",");
                            }
                            if(names.length > 0){
                                me.setNames(names);
                            }
                        }
                    }
                }
                request.send(null);
            }
        }
    },
    "buildPop":function(){                                //初始化提示框
        var me			= this;
        var info		= me.getInputAbsInfo();
        var div			= document.createElement("div");
        div.style.position		= "absolute";
        div.style.background	= me.opts.background;
        div.style.border		= me.opts.border;
        div.style.width			= me.opts.width == "" ? info.width -2 + "px" : me.opts.width;
        div.style.left			= info.left + "px";
        div.style.top			= info.top + info.height + 0 +"px";
        div.style.display		= "none";
        if( !me.opts.autoHeight){div.style.height = me.opts.height}
        document.body.appendChild(div);
        me.pop = div;
    },
    "resetPop":function(){                                //重置提示框
        var me = this;
        me.ul = null;

        me.activeLi = 0;
        if(me.pop){
            me.pop.innerHTML = "";
            me.pop.style.display = "none";
        }
    },
    "getInputAbsInfo":function(){                        //获得输入框绝对信息
        var me = this;
        var input = me.input;
        var offsetTop = parseInt(input.offsetTop);
        var offsetLeft = parseInt(input.offsetLeft);
        var offsetWidth = parseInt(input.offsetWidth);
        var offsetHeight = parseInt(input.offsetHeight);
        while(input = input.offsetParent){
            if(input.style.position == 'absolute' 
                || input.style.position == 'relative'
                || (input.style.overflow != 'visible' && input.style.overflow != '')
            ){
                break;
            }
            offsetTop += input.offsetTop;
            offsetLeft += input.offsetLeft;
        }
        return {top:offsetTop,left:offsetLeft,width:offsetWidth,height:offsetHeight}
    },
    "clearNames":function(){                           //清空提示信息
        var me = this;
        if(me.pop) me.pop.innerHTML = "";
    },
    "setNames":function(names){                        //设置提示信息
        var me = this;
        me.clearNames();
        var pop = me.pop;
        
        if(names.length > 0 ){
            var ul = document.createElement("ul");
				ul.style.listStyleType = "none";
				ul.style.listStyle = "none";

            for(var i =0 ,j = names.length; i<j; i++){
                var text = document.createTextNode(names[i]);
                var li = document.createElement("li");
                li.style.display = "block";

                li._index = i;
                li.onmouseover = function(){
                    me.setNormal(me.ul[me.activeLi]);
                    me.setActive(this);
                    me.activeLi = this._index;
                }
                li.onmouseout = function(){me.setNormal(this);}
                li.onmousedown = function(){
                    me.updateName(this.innerHTML,true);
                }
                li.appendChild(text);
                ul.appendChild(li);
            }
            pop.appendChild(ul);
            pop.style.display = "";
            me.ul = ul.childNodes;
            me.activeLi = me.ul.length-1;
        }
    },
    "updateName":function(text,flag){                    
        var me = this;
        me.input.value = text;
        if(flag){
            me.resetPop()
        }
    },
    "_xmlHttp":function(){
        var xml = null; 
        try { 
            xml = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){ 
            try{ 
                xml =new ActiveXObject("Microsoft.XMLHTTP");
            }catch(oc) { 
                xml =null;
            } 
        } 
        if ( !xml && typeof XMLHttpRequest != "undefined" ) { 
            xml =new XMLHttpRequest();
        } 
        return xml ;
    }
};

请求的查询页面只返回带,号的字段。鼠标就可以获取值，键盘总是出错，麻烦这位高手指正下，我javascript很差

15 个解决方案

#1

忘记说调用了，补充下
[code=HTML]
<div>
<input type="text" id="test" name="test" onkeyup="AutoComplete.doo(this,'search.asp',event)" value="" size="25" />
</div>
[code]

#2

自己顶一下，免的沉底了

#3

你把你的代码完整提供一份下载，帮你看看

#4

上面的给你js部分就是就是全部了，你另存为AutoComplete.js
在页面内调用

<div> 
<input type="text" id="test" name="test" onkeyup="AutoComplete.doo(this,'search.asp',event)" value="" size="25" /> 
</div>

#5

帖子挂这里都两天了，就没有个人来帮看看啊。这里的高手都到哪里去了？
难道是我把标题起错了？

#6

晕，'search.asp'还有你这个的内容呢？

还有你数据库结构呢？
JS我测试没什么大问题啊
得结合你的信息啊

#7

search.asp
返回就是一个数组，你测试可以建立一个静态，内容如下：
"a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start"

#8

问题出在我用键盘上键和下键去选择值的时候获得是空值

#9

你问问题，难道连一个完整的信息你都懒得整合放一起提供别人？

既然懒得，我也懒得看了！

#10

search.asp我没有做，只是做一个静态的内容页面来取值，测试JS的正确性，现在的问题是JS能获取值，能响应键盘输入，但用键盘上下键去选择的时候就获得undefined

#11

我等啊等，就是没等来一个高手。

#12

我不是高手 看到这么长的代码 我可耻的懒得看了。。。 
先留名 有空在看。。。

#13

太长了

#14

请把错误的现象描述一下.

#15

把两处

.childNodes[0]

删除就可以了。LZ要认真。