asp教程.net autocomplete组件实现详解方法
<!doctype html><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>combobox组件(autocomplete组件) </title>
<meta name="description" content="瓦岗寨, 导航首页, 用户不需改变使用习惯，可以在同一个页面使用百度或google搜索，比百度与google首页多出天气预报以及其它一些实用功能，是一个很实用的搜索引擎首页与导航首页。">
<meta name="keywords" content="山寨百度, 山寨google, 导航首页, 瓦岗寨, 导航首页集成百度与google搜索">
<script type="text/网页特效">
if(location.host.tolowercase()=='wagang.net') location.href='http://www.wagang.net';
</script>
<style>
/*reset font*/
html,body{}
body {font:13px/1.4 arial,helvetica,sans-serif;*font-size:small;*font:x-small;text-align:center;}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select,button,th,td {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
table {font-size:inherit;font:100%;}
input,select {font:100% arial,helvetica,clean,sans-serif;;}
button {overflow:visible}
th,em,strong,address,cite {font-style:normal;font-weight:normal;}
li {list-style:none;}
img,fieldset {border:0;}
ins {text-decoration:none;}body{font:12px arial;text-align:center;background:#fff}
body,p,form,ul{margin:0;padding:0}
body,form,#fm{position:relative}
img{border:0}
a{color:#00c}
#nav{padding:27px 0 0 0;}
#m,#wagang{width:650px;margin:0 auto}
.nv{font-size:16px;margin:0 0 4px -51px}
.nv a,.nv b,#su,.lk{font-size:14px}
.lg{margin:15px 0 0px;height:100px;overflow:hidden;}
#fm{padding-left:100px;text-align:left}
#kw{width:391px;padding:3px 1px;margin:0 6px 0 0;font:16px/16px arial}
#su{width:78px;height:28px;line-height:24px}
#kw,#su{vertical-align:middle}
.lk{margin:33px 0 80px 0}
.lh{margin:16px 0 5px;font:12px "宋体"}
.lh a{font:12px arial}.ac_wrap {position:absolute;z-index:100;background-color:#fff;overflow-y:hidden;font-size:14px;line-height:20px;}
.ac_wrap_inner {z-index:10;border:1px solid #3162a6;}
.ac_wrap * {white-space:nowrap;}
.ac_wrap table {background-color:#fff;width:100%;}
.ac_menu {text-align:left;}
.ac_toolbar {text-align:right}
.ac_menu tr.mouseo教程ver{background-color:#e6e6e6;}
.ac_menu tr.selected{background-color:#d6deec;}
</style>
<base target="_blank"></base>
</head>
<body><form id="hrefform" target="_blank" style="display:none;"></form>
<div id="m">
<div id="fm">
<form name="f" id="f" action="http://www.baidu.com/s"><input type="text" name="wd" id="kw" maxlength="200" value=""/><input type="submit" value="搜 索" id="su" target="_blank"/>
</form>
</div></div>
<script type="text/javascript">
(function(){
var mix=function(des, src){
for(var i in src){
des[i] = src[i];
}
},
//domu=qw.domu,
createelement=function (tagname, property) {
var el = document.createelement(tagname);
if (property) {
for (var i in property) el[i] = property[i];
}
return el;
},
//eventh=qw.eventh,
target=function(e) {
e=e||window.event;
return e.target || e.srcelement;
},
keycode=function(e) {
e=e||window.event;
return e.which || e.keycode || e.charcode;
},
preventdefault=function(e) {
e=e||window.event;
e.preventdefault && e.preventdefault() || (e.returnvalue = false);
},
//custevent=qw.custevent,
//nodeh=qw.nodeh,
hasclass=function(el, cn) {
return new regexp('(?:^|s)' +cn+ '(?:s|$)','i').test(el.classname);
},
addclass=function (el, cn) {
if (!hasclass(el, cn)) {
el.classname = (el.classname + ' '+cn).replace(/^s+|s+$/g,"");
}
},
removeclass=function (el, cn) {
if (hasclass(el, cn)) {
el.classname = el.classname.replace(new regexp('(?:s|^)' +cn+ '(?:s|$)','i'),' ').replace(/^s+|s+$/g,"");
}
},
//setstyle=nodeh.setstyle,
//getxy=nodeh.getxy, 由于getxy的兼容代码很长，所以无依赖化时，稍稍调整下，不用位置，而改用dom结构来定位
ancestornode=function(el,tagname){
while(el=el.parentnode){
if(el.tagname==tagname) return el;
}
return null;
},
on=function (element, name, handler) {
element.addeventlistener && element.addeventlistener(name, handler, false)
|| element.attachevent && element.attachevent('on' + name, handler);
},
isie=(/msie/i).test(navigator.useragent);
function encode4html(s){
var o=[/&/g,/"/g,/'/g,/</g,/>/g];
var n=["&",""","'","<",">"];
for(var i=0;i<o.length;i++)
{
s=s.replace(o[i],n[i]);
}
return s;
};/**
*@class combobox 可输入下拉框
*/
function combobox(opts){
mix(this,opts,1);
if(!this.lazyrender) this.render();
}combobox.events=["enter","selectitem"];
combobox.prototype={
/*
*参数
*/
width:0,
otext: null,//text-input对象
itemsdata:null,//items数据，array，需要在refreshdata方法里进行设值
minfilterlen:1,//最小filter长度。当otext.value不小于此值时，才会有suggest效果
/*
*开放的变量，readonly的
*/
omenu:null,
otoolbar:null,//控制行，目前只有关闭按钮
owrap:null,
selectedindex:-1,//当前选中项
filteredvalue:"",//过滤值。过滤动作已完成
filteringvalue:"",//过滤值。过滤动作正在进行（因为有时过滤是异步的）
acvalue:"",//通过自动完成得到的值
disabled:false,//suggest是否处于禁止状态。－－由页面逻辑决定
closed:false,//suggest是否处于关闭状态。－－由suggest自身决定
/*
*方法
*/
show: function(){
if(this.omenu.rows.length){
this.owrap.style.display="";
//var xy=getxy(this.otext);
//setstyle(this.owrap,{top:xy[1]+this.otext.offsetheight+"px",left:xy[0]+"px",display:""});
}
},
hide: function(){
this.owrap.style.display="none";
},
refreshitems: function(){
var me=this;
var data=me.itemsdata;
if(data && !data.__isitemsdatarendered){ //加上属性“__isitemsdatarendered”以标志data是否已经render成html
var html=[];
for(var i=0;i<data.length;i++){
//var datatype=data[i].constructor;
//if(datatype==string){//为string时，则字符串既是value，也是html
// html.push('<tr acvalue="'+encode4html(data[i])+'"><td>'+encode4html(data[i])+'</td></tr>');
//}
//else if(datatype==array){//为array时，则第一个元素为value，第二个元素为html
html.push('<tr acvalue="'+encode4html(data[i][0])+'"><td>'+data[i][1]+'</td></tr>');
//}
//else{//为object时，则其格式为{value:"aaab",html:"<b>aaa</b>b"}
// html.push('<tr acvalue="'+encode4html(data[i]["value"])+'"><td>'+data[i]["html"]+'</td></tr>');
//}
html.push("</tr>");
}
me._setmenuinnerhtml(html.join("").replace(/(<w+)/g,'$1 unselectable="on"'));
if(data.length) me.show();
else me.hide();
me.filteredvalue=me.filteringvalue;
me.acvalue="";
me.selectedindex=-1;
data.__isitemsdatarendered=true;
}
},
refreshdata:function(){
this.itemsdata=["refreshdata一定要重写！"];
},
setselectedindex:function(idx,needblur){
var me=this;
var rows=me.omenu.rows;
if(rows.length){
if(me.selectedindex>-1) removeclass(rows[me.selectedindex],"selected");
idx=(idx+rows.length+1)%(rows.length+1);
if(idx==rows.length){
me.acvalue=me.otext.value=me.filteringvalue;//这里用filteringvalue，而不用filteredvalue，是因为有时itemsdata是静态的（例如，不用过滤功能的单纯combobox）
idx=-1;
}
else {
me.acvalue=me.otext.value=rows[idx].getattribute("acvalue");
addclass(rows[idx],"selected");
}
}
else{
idx=-1;
}
me.selectedindex=idx;
},
_setmenuinnerhtml:function(html){
var div=createelement("div",{innerhtml:"<table>"+html+"</table>"});
var rows=div.firstchild.rows;
var omenu=this.omenu;
for (var i=omenu.childnodes.length-1;i>=0;i--) omenu.removechild(omenu.childnodes[i]);
while(rows.length) {
omenu.appendchild(rows[0]);
}
},
render: function(){
var me=this;
if(me._rendered) return ;
me._rendered=true;
//custevent.createevents(me,combobox.events);
var owrap=createelement("div",{classname:"ac_wrap",innerhtml:'<div class=ac_wrap_inner><div class=ac_menu_ctn><table cellspacing=0><tbody class=ac_menu></tbody></table></div><table><tbody class=ac_toolbar><tr><td><a href=# class=close>关闭</a></div></td></tr></tbody></table></div>'.replace(/(<w+)/g,'$1 unselectable="on"')});
//var b=document.body;
//b.insertbefore(owrap,b.firstchild);
var otext=me.otext;
otext.parentnode.insertbefore(owrap,otext);//为了减少定位麻烦，改用dom位置来定位
var els=owrap.getelementsbytagname("tbody");
var otoolbar=me.otoolbar=els[1], omenu=me.omenu=els[0];
otext.setattribute("autocomplete","off");//一定要用setattrubute，否则会导致在firefox里半输入状态下执行otext.blur()时会抛出无法捕捉的异常。
var w=(me.width || me.otext.offsetwidth)+"px";
if(isie) owrap.style.width=w;
else owrap.style.minwidth=w;
owrap.style.top=otext.offsetheight+'px';
me.owrap=owrap;
me.hide();
on(me.otext,"dblclick",function(e){//监控otext的事件
if(me.disabled || otext.value.length<me.minfilterlen) return;
if(me.closed=!me.closed) me.hide();
else me.show();
});
on(me.otext,"keydown",function(e){//监控otext的事件
if(me.disabled) return;
var kcode=keycode(e);
var dir=0;
switch(kcode){
case 40 : dir=1;break;
case 38 : dir=-1;break;
case 27 : if(!me.closed){me.hide();me.closed=true;preventdefault(e)} break;//隐藏suggest
case 13 : me.hide();me.onenter && me.onenter(); break;//隐藏suggest
}
if(dir && otext.value.length>=me.minfilterlen){
preventdefault(e);
if(owrap.style.display=="none"){
me.show();
me.closed=false;
}
else{
me.setselectedindex(me.selectedindex+dir);
}
}
});
on(me.otext,"focus",function(e){//监控otext的事件
if(me.disabled) return;
if(me._refreshtimer) clearinterval(me._refreshtimer);
me._refreshtimer=setinterval(function(){
var val=otext.value;
if(val.length<me.minfilterlen){
me.acvalue=me.filteringvalue=me.filteredvalue="";
me.hide();
me.closed=false;//吸收google suggest的策略：如果suggest被关闭，用户将otext清空，这时会将suggest打开。
}
else if(!me.closed){
if(val != me.filteredvalue && val != me.filteringvalue && val != me.acvalue){
me.filteringvalue=val;
me.refreshdata();
}
if(me.itemsdata){
me.refreshitems();
}
}
},100);
});
on(me.otext,"blur",function(e){//监控otext的事件
me.hide();
clearinterval(me._refreshtimer);
});
owrap.onmousedown=function(e){//监控owrap的事件
if(isie){otext.setcapture();settimeout(function(){otext.releasecapture();},10);} //解决“ie下，半输入状态时不能点击选项”的问题
preventdefault(e);
};
omenu.onclick=function(e){//监控omenu的事件
var el=target(e);
var tr=ancestornode(el,"tr");
if(tr) {
otext.blur();//firefox下半输入法输入时，选择item，console有错，无法catch，并且不影响运行。
settimeout(function(){otext.focus();},10);//解决“半输入状态时不能点击选项”的问题
me.setselectedindex(tr.rowindex,true);
me.hide();
me.onselectitem && me.onselectitem();
}
};
omenu.onmouseover=function(e){//监控omenu的事件
var el=target(e);
var tr=ancestornode(el,"tr");
if(tr) addclass(tr,"mouseover");
};
omenu.onmouseout=function(e){//监控omenu的事件
var el=target(e);
var tr=ancestornode(el,"tr");
if(tr) removeclass(tr,"mouseover");
};
otoolbar.getelementsbytagname("a")[0].onclick=function(e){//监控close按钮的事件
me.closed=true;
me.hide();
preventdefault(e);
};
}
}window.combobox=combobox;
})();function g(a){return document.getelementbyid(a);};
function getscript(d,a){var e=document.getelementsbytagname("head")[0],c=document.createelement("script"),b=false;c.src=d;c.onerror=c.onload=c.onreadystatechange=function(){if(!b&&(!this.readystate||this.readystate=="loaded"||this.readystate=="complete")){b=true;a&&a();c.onerror=c.onload=c.onreadystatechange=null;e.removechild(c);}};e.appendchild(c);};
function foreach(b,a){for(var c=0;c<b.length;c++){a(b[c]);}}window.sugcb =function (data){
var ar=[],
baidudata=data.s||[],
kw=g("kw").value;
for(var i=0;i<baidudata.length;i++){
var key=baidudata[i],
val=key;
if(kw && val.indexof(kw)==0){
val=kw+'<b>'+val.substr(kw.length)+'</b>';
}
if(key) ar.push([key,val]);
}
cb.itemsdata=ar;
};var cb=new combobox({otext:g("kw"),
onselectitem:function(){g('su').click();},
refreshdata:function(){
getscript("http://suggestion.baidu.com/su?p=3&cb=window.sugcb&t=1286453644402&wd="+
encodeuricomponent(this.otext.value));
}});</script>
</body>
</html>