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

完成有以下功能：

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

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

001 ;(function(window){
002 /* 插件開始 */
003 var autoComplete=function(o){
004 var handler=(function(){
005 var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 為每個選擇的dom都創(chuàng)建一個相對應(yīng)的對象，這樣選擇多個dom時(shí)可以很方便地使用 */
006 handler.prototype={
007 e:null, o:null, timer:null, show:0, input:null, popup:null,
008 init:function(e,o){/* 設(shè)置初始對象 */
009 this.e=e, this.o=o,
010 this.input=this.e.getElementsByTagName(this.o.input)[0],
011 this.popup=this.e.getElementsByTagName(this.o.popup)[0],
012 this.initEvent();/* 初始化各種事件 */
013 },
014 match:function(quickExpr,value,source){/* 生成提示 */
015 var li = null;
016 for(var i in source){
017 if( value.length>0 && quickExpr.exec(source[i])!=null ){
018 li = document.createElement('li');
019 li.innerHTML = '<a href="javascript:;">'+source[i]+'</a>';
020 this.popup.appendChild(li);
021 }
022 }
023 if(this.popup.getElementsByTagName('a').length)
024 this.popup.style.display='block';
025 else
026 this.popup.style.display='none';
027 },
028 ajax:function(type,url,quickExpr,search){/* ajax請求遠(yuǎn)程數(shù)據(jù) */
029 var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
030 xhr.open(type,url,true);/* 同異步在此修改 */
031 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
032 var that=this;
033 xhr.onreadystatechange = function(){
034 if(xhr.readyState==4) {
035 if(xhr.status==200) {
036 var data = ;
037 that.match(quickExpr,search,data);/* 相同于成功的回調(diào)函數(shù) */
038 }else{
039 alert("請求頁面異常!");/* 請求失敗 */
040 }
041 }
042 };
043 xhr.send(null);
044 },
045 fetch:function(ajax,search,quickExpr){
046 var that=this;
047 this.ajax(ajax.type,ajax.url+search,quickExpr,search);
048 },
049 initEvent:function(){/* 各事件的集合 */
050 var that=this;
051 this.input.onfocus = function(){
052 var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this;
053 that.timer=setInterval(function(){
054 if(value!=self.value){/* 判斷輸入內(nèi)容是否改變，兼容中文 */
055 value=self.value;
056 that.popup.innerHTML='';
057 if(value!=''){
058 quickExpr=RegExp('^'+value);
059 if(that.o.source) that.match(quickExpr,value,that.o.source);
060 else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);
061 }
062 }
063 },200);
064 };
065 this.input.onblur = function(){/* 輸入框添加事件 */
066 clearInterval(that.timer);
067 var current=-1;/* 記住當(dāng)前有焦點(diǎn)的選項(xiàng) */
068 var els = that.popup.getElementsByTagName('a');
069 var len = els.length-1;
070 var aClick = function(){
071 that.input.value=this.firstChild.nodeValue;
072 that.popup.innerHTML='';
073 that.popup.style.display='none';
074 };
075 var aFocus = function(){
076 for(var i=len; i>=0; i--){
077 if(this.parentNode===that.popup.children[i]){
078 current = i;
079 break;
080 }
081 }
082 for(var k in that.o.elemCSS.focus)
083 this.style[k] = that.o.elemCSS.focus[k];
084 };
085 var aBlur= function(){
086 for(var k in that.o.elemCSS.blur)
087 this.style[k] = that.o.elemCSS.blur[k];
088 };
089 var aKeydown = function(event){
090 event = event || window.event;/* 兼容IE */
091 if(event.keyCode==40){/* 處理上下方向鍵事件方便選擇提示的選項(xiàng) */
092 current++;
093 if(current<0) current=len;/* 處理循環(huán) */
094 if(current>len) current=0;
095 that.popup.getElementsByTagName('a')[current].focus();
096 }else if(event.keyCode==38){
097 current--;
098 if(current>len) current=0;
099 if(current<0) current=len;
100 that.popup.getElementsByTagName('a')[current].focus();
101 }
102 };
103 for(var i=0; i<els.length; i++){/* 為每個選項(xiàng)添加事件 */
104 els[i].onclick = aClick;
105 els[i].onfocus = aFocus;
106 els[i].onblur = aBlur;
107 els[i].onkeydown = aKeydown;
108 }
109 };
110 this.input.onkeydown = function(event){
111 event = event || window.event;/* 兼容IE */
112 if(event.keyCode==40){
113 that.popup.blur();
114 if(that.popup.getElementsByTagName('a')[0])
115 that.popup.getElementsByTagName('a')[0].focus();
116 }
117 };
118 this.e.onmouseover = function(){ that.show=1; };
119 this.e.onmouseout = function(){ that.show=0; };
120 addEvent.call(document,'click',function(){ if(that.show==0) that.popup.style.display='none'; });/* 處理提示框dom元素不支持onblur的情況 */
121 }
122 };
123 handler.prototype.init.prototype=handler.prototype;/* JQuery style，這樣我們在處的時(shí)候就不用每個dom元素都用new來創(chuàng)建對象了 */
124 return handler;/* 把內(nèi)部的處理函數(shù)傳到外部 */
125 })();
126 if(this.length){/* 處理選擇多個dom元素 */
127 for(var a=this.length-1; a>=0; a--){/* 調(diào)用方法為每個選擇的dom生成一個處理對象，使它們不互相影響 */
128 handler(this[a],o);
129 }
130 }else{/* 處理選擇一個dom元素 */
131 handler(this,o);
132 }
133 return this;
134 };
135 return window.autoComplete = autoComplete;/* 暴露方法給全局對象 */
136 /* 插件結(jié)束 */
137 })(window);

其中了一些全局的自定義函數(shù)，如addEvent和在例子中將要用到的getElementsByClassName函數(shù)如下：

01 var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各瀏覽器的選擇class的方法；(寫法參考了博客園：//www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html，想了解更多請看這個地址) */
02 node = node || document, tag = tag ? tag.toUpperCase() : "*";
03 if(document.getElementsByClassName){/* 支持getElementsByClassName的瀏覽器 */
04 var temp = node.getElementsByClassName(searchClass);
05 if(tag=="*"){
06 return temp;
07 } else {
08 var ret = new Array();
09 for(var i=0; i<temp.length; i++)
10 if(temp[i].nodeName==tag)
11 ret.push(temp[i]);
12 return ret;
13 }
14 }else{/* 不支持getElementsByClassName的瀏覽器 */
15 var classes = searchClass.split(" "),
16 elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
17 patterns = [], returnElements = [], current, match;
18 var i = classes.length;
19 while(--i >= 0)
20 patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
21 var j = elements.length;
22 while(--j >= 0){
23 current = elements[j], match = false;
24 for(var k=0, kl=patterns.length; k<kl; k++){
25 match = patterns[k].test(current.className);
26 if(!match) break;
27 }
28 if(match) returnElements.push(current);
29 }
30 return returnElements;
31 }
32 };
33 var addEvent=(function(){/* 用此函數(shù)添加事件防止事件覆蓋 */
34 if(document.addEventListener){
35 return function(type, fn){ this.addEventListener(type, fn, false); };
36 }else if(document.attachEvent){
37 return function(type,fn){
38 this.attachEvent('on'+type, function () {
39 return fn.call(this, window.event);/* 兼容IE */
40 });
41 };
42 }
43 })();

最后是調(diào)用的部分，調(diào)用和每個參數(shù)的部分都有說明和注意事項(xiàng)，再說一個其中source和ajax參數(shù)是二選一，如果二者都寫只有source是有用的，調(diào)用代碼如下：

1 addEvent.call(null,'load',function(){
2 autoComplete.call( getElementsByClassName('autoComplete'), {/* 使用call或apply調(diào)用此方法 */
3 source:['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932],/* 提示時(shí)在此數(shù)組中搜索 */
4 //ajax:{ type:'post',url:'./php/fetch.php?search=' },/* 如果使用ajax則返回的數(shù)據(jù)格式要與source相同，如為字符串"[111,222,333,444]"等形式。*/
5 elemCSS:{ focus:{'color':'#00ff00','background':'red'}, blur:{'color':'#ff0000','background':'transparent'} },/* 些對象中的key要js對象中的style屬性支持 */
6 input:'input',/* 輸入框使用input元素 */
7 popup:'ul'/* 提示框使用ul元素 */
8 });
9 });

代碼比較多，但是測試的比較完整，基本沒有什么大毛病了，如果有什么毛病請大家指正，謝謝！

下面是個完整的例子，大家可以在線測試一下，歡迎指正：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//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的方法；(寫法參考了博客園：//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(){/* 用此函數(shù)添加事件防止事件覆蓋 */
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都創(chuàng)建一個相對應(yīng)的對象，這樣選擇多個dom時(shí)可以很方便地使用 */
handler.prototype={
e:null, o:null, timer:null, show:0, input:null, popup:null,
init:function(e,o){/* 設(shè)置初始對象 */
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請求遠(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 = ;
that.match(quickExpr,search,data);/* 相同于成功的回調(diào)函數(shù) */
}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){/* 判斷輸入內(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;
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++){/* 為每個選項(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，這樣我們在處的時(shí)候就不用每個dom元素都用new來創(chuàng)建對象了 */
return handler;/* 把內(nèi)部的處理函數(shù)傳到外部 */
})();
if(this.length){/* 處理選擇多個dom元素 */
for(var a=this.length-1; a>=0; a--){/* 調(diào)用方法為每個選擇的dom生成一個處理對象，使它們不互相影響 */
handler(this[a],o);
}
}else{/* 處理選擇一個dom元素 */
handler(this,o);
}
return this;
};
return window.autoComplete = autoComplete;/* 暴露方法給全局對象 */
/* 插件結(jié)束 */
})(window);
/* 調(diào)用 */
addEvent.call(null,'load',function(){
autoComplete.call( getElementsByClassName('autoComplete'), {/* 使用call或apply調(diào)用此方法 */
source:['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932],/* 提示時(shí)在此數(shù)組中搜索 */
//ajax:{ type:'post',url:'./php/fetch.php?search=' },/* 如果使用ajax則遠(yuǎn)程返回的數(shù)據(jù)格式要與source相同 */
elemCSS:{ focus:{'color':'#00ff00','background':'red'}, blur:{'color':'#ff0000','background':'transparent'} },/* 些對象中的key要js對象中的style屬性支持 */
input:'input',/* 輸入框使用input元素 */
popup:'ul'/* 提示框使用ul元素 */
});
});
//]]>
</script>
</head>
<body><!-- 這所以使用這么多的z-index是因?yàn)閕e6和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>用鼠標(biāo)或上下鍵可以選擇提示。</li>
<li>選擇點(diǎn)擊鼠標(biāo)或點(diǎn)回車可以選擇選項(xiàng)。</li>
<li>可以修改調(diào)用處，使各個輸入框提示不同內(nèi)容。</li>
</ul>
</div>
</body>
</html>