以前也寫(xiě)過(guò)一個(gè)jQuery的這種插件，但是很多地方根本不用jQuery，這個(gè)功能也有很多其它庫(kù)支持，但是為了用這個(gè)功能而加載很多js插件，這樣效率明顯下降了很多，而且這個(gè)東西平時(shí)也很常用，所以一決心自己寫(xiě)了個(gè)相對(duì)比較獨(dú)立的。

　　完成有以下功能：

• 輸入字符會(huì)把以輸入字符開(kāi)頭的提示出來(lái)。
• 支持上下方向鍵選擇提示選項(xiàng)，支持循環(huán)
• 支持綁定一個(gè)數(shù)組提示，支持ajax傳遞輸入框值請(qǐng)求數(shù)據(jù)。
• 支持多個(gè)選擇的dom元素一塊綁定數(shù)據(jù)實(shí)現(xiàn)輸入提示。各dom元素也可以單獨(dú)綁定自己的數(shù)據(jù)實(shí)現(xiàn)輸入提示，互不影響。
• 支持中文。

      首先是js的核心部分，其各部分都有較詳細(xì)的說(shuō)明，代碼如下：

;(function(window){
/* 插件開(kāi)始 */
var autoComplete=function(o){
    var handler=(function(){
        var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 為每個(gè)選擇的dom都創(chuàng)建一個(gè)相對(duì)應(yīng)的對(duì)象，這樣選擇多個(gè)dom時(shí)可以很方便地使用 */
        handler.prototype={
            e:null, o:null, timer:null, show:0, input:null, popup:null,
            init:function(e,o){/* 設(shè)置初始對(duì)象 */
                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請(qǐng)求遠(yuǎn)程數(shù)據(jù) */
                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);/* 相同于成功的回調(diào)函數(shù) */
                        }else{
                            alert("請(qǐng)求頁(yè)面異常!");/* 請(qǐng)求失敗 */
                        }
                    }
                };
                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(){
                    var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this;
                    that.timer=setInterval(function(){
                        if(value!=self.value){/* 判斷輸入內(nèi)容是否改變，兼容中文 */
                            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(){/*  輸入框添加事件 */
                    clearInterval(that.timer);
                    var current=-1;/* 記住當(dāng)前有焦點(diǎn)的選項(xiàng) */
                    var els = that.popup.getElementsByTagName('a');
                    var len = els.length-1;
                    var aClick = function(){
                        that.input.value=this.firstChild.nodeValue;
                        that.popup.innerHTML='';
                        that.popup.style.display='none';
                    };
                    var aFocus = function(){
                        for(var i=len; i>=0; i--){
                            if(this.parentNode===that.popup.children[i]){
                                current = i;
                                break;
                            }
                        }
                        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(event.keyCode==40){/* 處理上下方向鍵事件方便選擇提示的選項(xiàng) */
                            current++;
                            if(current<0) current=len;/* 處理循環(huán) */
                            if(current>len) current=0;
                            that.popup.getElementsByTagName('a')[current].focus();
                        }else if(event.keyCode==38){
                            current--;
                            if(current>len) current=0;
                            if(current<0) current=len;
                            that.popup.getElementsByTagName('a')[current].focus();
                        }
                    };
                    for(var i=0; i<els.length; i++){/* 為每個(gè)選項(xiàng)添加事件 */
                        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 */
                    if(event.keyCode==40){
                        that.popup.blur();
                        if(that.popup.getElementsByTagName('a')[0])
                            that.popup.getElementsByTagName('a')[0].focus();
                    }
                };
                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，這樣我們?cè)谔幍臅r(shí)候就不用每個(gè)dom元素都用new來(lái)創(chuàng)建對(duì)象了 */
        return handler;/* 把內(nèi)部的處理函數(shù)傳到外部 */
    })();
    if(this.length){/* 處理選擇多個(gè)dom元素 */
        for(var a=this.length-1; a>=0; a--){/* 調(diào)用方法為每個(gè)選擇的dom生成一個(gè)處理對(duì)象，使它們不互相影響 */
            handler(this[a],o);
        }
    }else{/* 處理選擇一個(gè)dom元素 */
        handler(this,o);
    }
    return this;
};
return window.autoComplete = autoComplete;/* 暴露方法給全局對(duì)象 */
/* 插件結(jié)束 */
})(window);

it知識(shí)庫(kù)：用js實(shí)現(xiàn)輸入提示（自動(dòng)完成），轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。