asp.net autocomplete組件實現詳解方法

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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下半IME輸入時，選擇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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

asp.net autocomplete組件實現詳解方法

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support