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框架很简单和方便的实现功能，但这种是最原始的，或许还有点麻烦，参考参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。