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

180 阅读 0 评论 119 点赞

我是靠谱客的博主痴情柚子，最近开发中收集的这篇文章主要介绍js实现可输入可选择的select下拉框，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了可输入可选择的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效果：