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效果：

option的值是从数据库中读出来的，页面会有很多这样的，所以每个inpout的id说循环的。

1.5说明：

这个要应用jquery库，我引用的是系统中有的jquery-1.7.2.min.js

要是只有一个输入框，可以把input的id写死。

我用这个适应为客户用的浏览器是ie8的，我必须要兼容ie8才行，虽然现在很多jquery框架很简单和方便的实现功能，但这种是最原始的，或许还有点麻烦，参考参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基础教程