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

完成有以下功能：

輸入字符會把以輸入字符開頭的提示出來。

支持上下方向鍵選擇提示選項，支持循環

支持綁定一個數組提示，支持ajax傳遞輸入框值請求數據。

支持多個選擇的dom元素一塊綁定數據實現輸入提示。各dom元素也可以單獨綁定自己的數據實現輸入提示，互不影響。

支持中文。

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

view source print ?

  ;( 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 = '' +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){    
 
                           eventevent = 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){    
 
                      eventevent = 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的情況 */    
 
               }    
 
           };    
 
           handlerhandler.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函數如下：

view source print ?

var getElementsByClassName = function (searchClass, node, tag) { /* 兼容各瀏覽器的選擇class的方法；(寫法參考了博客園：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html  
，想了解更多請看這個地址) */    
 
      nodenode = node || document, tagtag = 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++)    
 

【編輯推薦】

1. JavaScript跨域總結與解決辦法
2. 使用Javascript開發移動應用程序
3. 10個令人驚奇的HTML5和JavaScript效果
4. JavaScript初學者應注意的七個細節