可输入、自动匹配的下拉框更新版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没问题,只是内存每匹配一次都只涨,匹配完了也不会降,非常头痛中...

相关文章推荐

可以输入带自动匹配的下拉框

  • 2013年04月26日 14:43
  • 636KB
  • 下载

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

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

JQuery自动匹配下拉框

  • 2017年11月15日 22:43
  • 6KB
  • 下载

JQuery EasyUI+Struts2自动匹配输入下拉框(combobox)

jquery ui的combobox控件是一个即可根据输入自动显示匹配的选项,又可下拉显示所有选项的下拉框(支持中文): web页面: easyui test...

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

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

JSuggest自动匹配下拉框使用方法

1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 /** * * Description : JSuggest 下...

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

html代码 项目城市: 请选择 ...

EasyUI_Combobox输入文本匹配加载下拉框数据

效果如图: 每次输入数据去匹配数据库数据,加载到下拉框中。 边输入边加载,通常我们想到的就是文本框的onChange事件,不过这里用onchange,可以实现,但bug就太多了。 ...

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

  • madinc
  • madinc
  • 2015年11月19日 15:13
  • 290
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:可输入、自动匹配的下拉框更新版dhCombobox
举报原因:
原因补充:

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