asp.net autocomplete组件实现详解方法

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_易做图 {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,
  o易做图: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";
  },
  refre易做图ems: 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_易做图><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 o易做图=me.o易做图=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.refre易做图ems();
      }
     }
    },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");
   };
   o易做图.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>

补充：asp.net教程,.Net开发