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

2024-10-14 22:28:21

本文实例为大家分享了可输入可选择的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框架很简单和方便的实现功能，但这种是最原始的，或许还有点麻烦，参考参考。

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

angularjs 实现带查找筛选功能的select下拉框实例

一.背景对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析: 目标在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele
jquery动态加载select下拉框示例代码

如题,直接上代码,实战学习. 复制代码代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g
select下拉框插件jquery.editable-select详解

项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> <select class="source"> <option value="0">人工导入</option> <option value="1">数据服务平台</option> </select> js代码 $('#noMean').editabl
JS Select下拉框(支持输入模糊查询)

本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f
Bootstrap select多选下拉框实现代码

前言项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们  <link rel="stylesheet" href="https://cdnjs.cl
Bootstrap select实现下拉框多选效果

在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-
jquery及原生js获取select下拉框选中的值示例

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法复制代码代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas
jquery multiSelect 多选下拉框

$("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText
基于jquery的网页SELECT下拉框美化代码

1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题. 2.允许多次调用 $("...").selectCss(),以解决Select的options更新后无法同步的问题. 使用方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

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

相关推荐

随机推荐