js实现可输入可选择的select下拉框

2019-11-19 18:21:02

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了可输入可选择的select下拉框，供大家参考，具体内容如下

1、原理：

1.1将input输入框和select框合并在一起，但是显示出向下点击的按钮:

这种比较容易做到

1.2出现输入值能够自动匹配的功能

动态的加载一个临时的div出现在该input下方，当点击页面中的空白地方，div隐藏。

1.3代码：

<!doctype html> <html lang="en">  <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <script language="Javascript" src="/reserve/common/js/jquery-1.7.2.min.js"></script>  </head>  <body>  <div style="z-index:1" ><!-- style="position:relative;" -->    <span style="margin-left:100px;width:18px;overflow:hidden;">     <select id='editable-Select--<%=i %>' name="editable-Select" onClick="getkindcode(this)"      style="width:185px;height:21px;margin-left:-100px;" >            <%       ArrayList acckindList = akc.accKindList();       for(int j = 0;j<acckindList.size();j++){       akdto = (accKindDto)acckindList.get(j);       %>      <option value="<%=akdto.getAcckindcode() %>--<%=akdto.getAcckindname() %>">       <%=akdto.getAcckindcode() %>--<%=akdto.getAcckindname() %>      </option>       <%} %>     </select>     </span>     <input type="text" name="box" id='box_<%=i %>' onKeyup="changeText(this)"    style="width:165px;height:15px;margin-left:-190px;"    >  <script type="text/javascript">  function changeText(obj){   var len = document.getElementById('editable-Select--0').options.length ;  //alert(len);  var totalValues;  for(i=0;i<len;i++){   totalValues+= document.getElementById('editable-Select--0').options[i].text+',';  }  //alert("totalValues.length=="+totalValues.length);  //alert("totalValues=="+totalValues);  var inputId= obj.id;  var inv = document.getElementById(obj.id).value;  //showTip(obj.id,totalValues);  var _inputNode = document.getElementById(inputId);  _inputValue = _inputNode.value;  if(/^[/s]*$/.test(_inputValue)){  //alert("kongge");  return;  }  _parentNode = _inputNode.parentNode;  _divNode = document.createElement("div");  var config = {   backgroundColor: "#FFFFFF",   hoverBackgroundColor: "#BFEFFF",   divHeight: "100px",   divWidth: "180px",   divBorder: "1px solid gray",   overflowY: "scroll",   inputHeight: 20    };  //console.log(_inputNode);--不兼容  //alert(_inputNode);  $.extend(true,config);    //如果已经存在了divNode 则删除  var _lastDivNode = document.getElementById(inputId+"_div");//$("#"+inputId+"_div")[0];  if(_lastDivNode)   _parentNode.removeChild(_lastDivNode);  var _offsetPosition = getPosition(_inputNode);  //显示待选div样式  _divNode.id = inputId+"_div";  //alert("div---:"+_divNode.id);  _divNode.style.height = config.divHeight;  _divNode.style.width = config.divWidth;  _divNode.style.overflowY = config.overflowY;  _divNode.style.display = "block";  _divNode.style.border = config.divBorder;  _divNode.style.position = "absolute";  _divNode.style.top = (_offsetPosition.y+config.inputHeight)+"px";  _divNode.style.left = _offsetPosition.x+"px";      //第一次加载的时候初始化样式文件  //var _headNode = $("head")[0];  //alert("_headNode=="+_headNode);  //var _cssNode = document.createElement("style");  //var _cssContent = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}";  //_cssContent += "#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}";  //alert("_cssContent=="+_cssContent);  //_cssNode.innerHTML = _cssContent;// ie8不识别innerHTML 没有背景颜色是这里的问题  //alert("_cssNode=="+_cssNode.innerHTML); //兼容ie：动态加载样式  function includeStyleElement(styles,styleId) {   if (document.getElementById(styleId)) {   return   }   var style = document.createElement("style");   style.id = styleId;   (document.getElementsByTagName("head")[0] || document.body).appendChild(style);   if (style.styleSheet) { //for ie   style.styleSheet.cssText = styles;   } else {//for w3c   style.appendChild(document.createTextNode(styles));   }  }  var styles = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}";  styles+="#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}";  includeStyleElement(styles,inputId+"_style");  //alert(styles);   // _headNode.appendChild(document.createTextNode(cssContent));  _divNode.innerHTML = "";  var _divHtml = "";      var optionobj = document.getElementById('editable-Select--0').options;  for(var i=0;i<optionobj.length;i++){  var _tempValue = optionobj[i].value;  if(isIncluded(_tempValue,_inputValue)){   _divHtml += "<div onclick='_inputDivClick(/""+inputId+"/",/""+_divNode.id+"/",/""+_tempValue+"/")'>"+_tempValue+"</div>";   }  }    _divNode.innerHTML = _divHtml;  //alert("_divNode内容=="+_divNode.innerHTML);  if(_divNode.innerHTML == null || _divNode.innerHTML == "" ){   hide(inputId);  }  _parentNode.appendChild(_divNode);     function hide(inputId) {   //alert("hide()----inputid=="+inputId);   var div_id = inputId+"_div";   //document.getElementById(div_id).style.visibility = 'hidden';   $('#'+div_id).css('display','none');   }      /**  * _inputDivClick 当选中一个下拉列表选项时触发  * inputNodeId: 输入框的id  * divNodeId: 自动创建的div的id  * value: 待选值  */  /* function _inputDivClick(inputNodeId,divNodeId,value){  alert("_inputDivClick-----");   var inputNode = document.getElementById(inputNodeId);   alert("inputNode=="+inputNode.value);   var divNode = document.getElementById(divNodeId);   //var divNode = $("#"+divNodeId)[0];   inputNode.value = value;   alert("inputNode.value 选择点击值=="+inputNode.value);   inputNode.parentNode.removeChild(divNode);  } */    /**  * isInclude方法用于测试source是否包含有pattern这个字符串  * source: 待测试的字符串  * pattern:文本框输入的值  */  function isIncluded(source,pattern){   var _reg = new RegExp(".*"+pattern+".*");   return _reg.test(source);  }  //将要获取绝对位置的标签传进去，返回一个包含x和y属性的对象  function getPosition(e)  {   var t=e.offsetTop;   var l=e.offsetLeft;   while(e=e.offsetParent)   {    t+=e.offsetTop;    l+=e.offsetLeft;   }   var point = eval("({x:"+l+",y:"+t+"})");   return point;  }  }  </script>  <script type="text/javascript">   /**   * _inputDivClick 当选中一个下拉列表选项时触发   * inputNodeId: 输入框的id   * divNodeId: 自动创建的div的id   * value: 待选值   */   function _inputDivClick(inputNodeId,divNodeId,value){   var inputNode = document.getElementById(inputNodeId);   //alert("inputNode=="+inputNode.value);   var divNode = document.getElementById(divNodeId);   //var divNode = $("#"+divNodeId)[0];   inputNode.value = value;   //alert("inputNode.value 选择点击值=="+inputNode.value);   inputNode.parentNode.removeChild(divNode);   }    function getkindcode(obj){  var index = obj.selectedIndex; // 选中索引  var text = obj.options[index].text; // 选中文本  var Kindvalue = obj.options[index].value; // 选中值   var acckindid=obj.id;  //alert(acckindid);  //alert(Kindvalue);    var inputid = "box_"+acckindid.split("--")[1];  //alert("inputid："+inputid);  var inputobj = document.getElementById(inputid);  inputobj.value = Kindvalue;  //alert("inputvalue2 ："+inputobj.value);  }   </script>   <font color="red" size="2px">* </font><font size="2px">输入格式：代码&&名称</font>  </div>  <script type="text/javascript">  var boxs = document.getElementsByName("box");  var num = boxs.length;  /* 点击空白出隐藏临时div */  $(document).bind('click',function(e){  var e = e || window.event; //浏览器兼容性  var elem = e.target || e.srcElement;  //alert("elem.id=="+elem.id);  for(var i=0;i<num;i++){   var divID = "box_"+i+"_div";   while (elem) { //循环判断至跟节点，防止点击的是div子元素   if (elem.id && elem.id==divID) {   return;   }   elem = elem.parentNode;   }   $('#'+divID).css('display','none'); //点击的不是div或其子元素   }  });   </script>  </body> </html>

1.4效果：