以前也寫過一個jQuery的這種插件，但是很多地方根本不用jQuery，這個功能也有很多其它庫支持，但是為了用這個功能而加載很多js插件，這樣效率明顯下降了很多，而且這個東西平時也很常用，所以一決心自己寫了個相對比較獨立的。

　　完成有以下功能：

• 輸入字符會把以輸入字符開頭的提示出來。
• 支持上下方向鍵選擇提示選項，支持循環
• 支持綁定一個數組提示，支持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){
                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){/* 判斷輸入內容是否改變，兼容中文 */
                            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;/* 記住當前有焦點的選項 */
                    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){/* 處理上下方向鍵事件方便選擇提示的選項 */
                            current++;
                            if(current<0) current=len;/* 處理循環 */
                            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++){/* 為每個選項添加事件 */
                        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，這樣我們在處的時候就不用每個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);

it知識庫：用js實現輸入提示（自動完成），轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。