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框架很简单和方便的实现功能，但这种是最原始的，或许还有点麻烦，参考参考。

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