js實現可輸入可選擇的select下拉框_javascript技巧

本文執行個體為大家分享了可輸入可選擇的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架構很簡單和方便的實現功能，但這種是最原始的，或許還有點麻煩，參考參考。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。