可输入、自动匹配的下拉框更新版dhCombobox

原创 2006年06月08日 15:07:00

全新写了一遍,全部用Array Join方式实现的类似Combobox,真心讨教更高效合理的方法.

<html>
<head>
<title>dhCombobox test</title>
<script language="javascript">
function dhCombobox(){
 //author:dh20156;
 var dh = this;

 //返回实例名
 this.clsName = null;

 //定义目标对象
 this.targetObj = null;

 //定义提示框属性
 this.popWidth = 0;
 this.popHeight = 100;

 //定义数据源(数组)
 this.arrayData = [];

 //定义匹配后的结果
 var nowHtml = null;

 //定义当前选定的结果
 var i_selected = 0;

 //定义光标键所在的位置
 var i_move = i_selected;

 //匹配用户输入字符结果
 Array.prototype.contains = function(o) {
  var tc = [];
  var nc = 0;
  for(var i = 0, l = this.length; i < l; i++) {
   if(this[i].indexOf(o) >= 0){
    if(this[i].indexOf(";") >= 0){
     var tempData = this[i].split(";");
     tc[nc++] = "<DIV id='cdiv"+nc+"' value=/""+tempData[1]+"/" onmouseover=/"parent."+dh.clsName+".mouse_over(this);/" onmouseout=/"parent."+dh.clsName+".mouse_out(this);/" onclick=/"parent."+dh.clsName+".select(this);/">"+tempData[0]+"</DIV>";
    }else{
     tc[nc++] = "<DIV id='cdiv"+nc+"' value=/""+this[i]+"/" onmouseover=/"parent."+dh.clsName+".mouse_over(this);/" onmouseout=/"parent."+dh.clsName+".mouse_out(this);/" onclick=/"parent."+dh.clsName+".select(this);/">"+this[i]+"</DIV>";
    }
    nc++;
   }
  }
  if(nc>0){
   nowHtml = tc.join("");
   tc = null;
  }else{
   nowHtml = "";
  }
 }

 //匹配
 function searchKey(){
  var begin = new Date().getTime();
  var str = dh.targetObj.value;
  if(str.replace(//s/g,"") != ""){
   dh.arrayData.contains(str);
   showPop(nowHtml);
   i_selected = 1;
   getFocus();
  }else{
   if(dhpop.isOpen){
    dhpop.hide();
   }
  }
  st.value = (new Date().getTime() - begin)+"ms";
 }

 //按键处理
 function pressKey(){
  var kc = event.keyCode;
  var obj = dhpop.document.all.fdiv;
  if(obj == "[object]"){
   var objcl = obj.childNodes.length;
   switch(kc){
    case 13: //回车
     if(i_move > 0){
      var oldchild = obj.childNodes[i_move-1];
      dh.select(oldchild);
      i_selected = i_move;
      dh.targetObj.blur();
     }
     break;
    case 33: //PgUp
     obj.doScroll("scrollbarPageUp");
     break;
    case 34: //PgDn
     obj.doScroll("scrollbarPageDown");
     break;
    case 38: //上箭头
     if(objcl > 0 && i_move > 0){

      if(i_move > 1){
       var oldchild = obj.childNodes[i_move-1];
       oldchild.style.background = "";
       oldchild.style.color = "";
      }

      if(i_move > 1){
       var objchild = obj.childNodes[i_move-2];
       objchild.style.background = "highlight";
       objchild.style.color = "highlighttext";
       if(obj.scrollTop >= objchild.offsetTop){
        objchild.scrollIntoView(true);
       }
      }

      if(i_move > 2){
       i_move--;
      }else{
       i_move = 1;
      }
      }
     break;
    case 40: //下箭头
     if(objcl > 0 && i_move <= objcl){

      if(i_move > 0 && i_move < objcl){
       var oldchild = obj.childNodes[i_move-1];
       oldchild.style.background = "";
       oldchild.style.color = "";
      }

      if(i_move < objcl){
       var objchild = obj.childNodes[i_move];
       objchild.style.background = "highlight";
       objchild.style.color = "highlighttext";
       if(obj.scrollTop+dh.popHeight-objchild.offsetHeight-1 <= objchild.offsetTop){
        objchild.scrollIntoView(true);
       }
      }

      if(i_move < objcl){
       i_move++;
      }
     }
     break;
    default : //其他键
     if(!dhpop.isOpen){
      if(nowHtml != null){
       showPop(nowHtml);
      }else{
       showPop(popHtml);
      }
     }
     i_move = 0;
     break;
   }
  }
 }

 //选择匹配结果
 this.select = function(obj){
  this.targetObj.value = obj.value;
  dhpop.hide();
  this.targetObj.blur();
  i_selected = 1;
 }

 //鼠标指向匹配结果事件
 this.mouse_over = function(obj){
  obj.style.background = "highlight";
  obj.style.color = "highlighttext";
 }

 //鼠标离开匹配结果事件
 this.mouse_out = function(obj){
  obj.style.background = "";
  obj.style.color = "";
 }

 //定义提示框
 var dhpop = window.createPopup();

 //弹出提示框
 function showPop(str){
  var objstr = dh.targetObj.value;
  if(objstr.replace(//s/g,"") != ""){
   var dhpopBody = dhpop.document.body;

   if(str != null){
    dhpopBody.innerHTML = "<DIV id=/"fdiv/" style=/"width:"+(dh.popWidth-1)+";height:"+(dh.popHeight-1)+";overflow-y:auto;overflow-x:auto;cursor:default;/" onselectstart=/"return false/" oncontextmenu=/"return false/">"+str+"</DIV>";
   }else{
    dhpopBody.innerHTML = "";
   }

   if(!dhpop.isOpen){
    var popObj = dh.targetObj;
    var popLeft = 2;
    var popTop = popObj.clientHeight+4;
    var popWidth = dh.popWidth;
    var popHeight = dh.popHeight;
    dhpopBody.style.border = "1px solid buttonshadow";
    dhpopBody.style.background = "lightyellow";
    dhpopBody.style.fontFamily = "arial";
    dhpopBody.style.fontSize = "12px";
    dhpopBody.style.scrollbarFaceColor = "lightyellow";
    dhpopBody.style.scrollbarShadowColor = "lightyellow";
    dhpopBody.style.scrollbarBaseColor = "buttonface";
    dhpopBody.style.scrollbarTrackColor = "black";
    dhpopBody.style.scrollbarHighlightColor = "lightyellow";
    dhpopBody.style.scrollbarDarkShadowColor = "buttonshadow";
    dhpop.show(popLeft,popTop,popWidth,popHeight,popObj);
   }
  }
 }

 //获得选择的结果焦点
 function getFocus(){
  if(dhpop.isOpen){
   var obj = dhpop.document.all.fdiv;
   if(obj == "[object]"){
    var objcl = obj.childNodes.length;
    if(i_selected > 0 && objcl>0 && i_selected <= objcl){
     var objchild = obj.childNodes[i_selected-1];
     objchild.style.background = "highlight";
     objchild.style.color = "highlighttext";
     objchild.scrollIntoView(true);
     i_move = i_selected;
    }
    if(objcl == 1){
     var objchild = obj.childNodes[0];
     objchild.style.background = "highlight";
     objchild.style.color = "highlighttext";
     objchild.scrollIntoView(true);
     i_move = i_selected;
    }
   }
  }
 }

 //对象实例化
 this.setup = function(){
  if(this.popWidth == 0){
   this.popWidth = this.targetObj.clientWidth;
  }
  var targetObj = this.targetObj;
  targetObj.onclick = function(){showPop(nowHtml);getFocus();}
  targetObj.onkeydown = function(){pressKey();}
  targetObj.onpropertychange = function(){searchKey();}
 }
}
</script>
</head>
<body>
<table>
 <tr>
  <td>
   <input type="text" id="ipt"> <input type="text" id="st">
  </td>
 </tr>
</table>

<script defer>

var ads = new Array();
for(var i=0;i<10000;i++){
 ads[i] = Math.random()*100000000+"";
}

var dhcomb = new dhCombobox();
 dhcomb.clsName = "dhcomb";
 dhcomb.targetObj = ipt;
 dhcomb.arrayData = ads;
dhcomb.setup();

ads = null;

</script>
</body>
</html>

第一次匹配感觉还不错,以后删除重新输入其他的匹配就慢了,我观察了,CPU没问题,只是内存每匹配一次都只涨,匹配完了也不会降,非常头痛中...

考试系统——可输入并自动匹配的下拉框(三)——Html,Web控件级联

本篇博客主要解决JQUery Easy UI框架combobox和dropdownlist的级联传值问题。上篇博客说了easy ui的框架必须按照其自己的实现方案去实现,只要有一点和easy ui的...
  • liutengteng130
  • liutengteng130
  • 2013年12月09日 12:11
  • 5496

考试系统——可输入并自动匹配的下拉框(一)——实现可输入并自动匹配

自动匹配,像我们平时用的百度,谷歌,如果输入某个字下面会自动匹配出很多内容来,让我们用起来很方便。             我们平时做项目,下拉框用DropDownList很方便,绑定数据库即可把数据...
  • liutengteng130
  • liutengteng130
  • 2013年11月13日 21:28
  • 5911

可编辑可自动匹配的联动下拉框实现

html代码 项目城市: 请选择 ...
  • sinat_29325027
  • sinat_29325027
  • 2016年03月03日 18:17
  • 512

js:可输入可选择的select下拉框,可及时匹配包含输入的内容(兼容ie)

js:可输入可选择的select下拉框,可及时匹配内容(兼容ie)
  • u014547764
  • u014547764
  • 2016年12月21日 15:00
  • 1663

仿下拉框,可选择,可输入,可匹配

  • madinc
  • madinc
  • 2015年11月19日 15:13
  • 357

考试系统——可输入并自动匹配的下拉框(二)——JQuery Easy UI框架

不看帮助寸步难行,帮助是站在巨人的肩膀上。
  • liutengteng130
  • liutengteng130
  • 2013年12月04日 08:10
  • 14721

下拉框(可输入+自动匹配)

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签,对应demo如下: 优点:节约js代码; 缺点:IE 9及以下的IE浏览...
  • qq_20743823
  • qq_20743823
  • 2016年10月25日 22:40
  • 186

可输入、自动匹配的下拉框

最近做一B/S项目,客户习惯了速达里边的COMBOBOX控件的使用,输入产品编号然后自动提示匹配产品信息,为了实现这个功能想了很多办法,原本在无技可施的时候准备用ActiveX控件凑合一下算了,好在J...
  • dh20156
  • dh20156
  • 2005年10月16日 13:55
  • 5956

可输入、自动匹配的下拉框

STYLE.CSS.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;z-index:99;cursor:default;overfl...
  • windok2004
  • windok2004
  • 2005年10月27日 13:27
  • 1169

jquery模拟可输入的下拉框

//页面html
  • colorsunlight
  • colorsunlight
  • 2015年03月12日 14:17
  • 651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:可输入、自动匹配的下拉框更新版dhCombobox
举报原因:
原因补充:

(最多只允许输入30个字)