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


Posted in Javascript onDecember 21, 2016

本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下

1、原理:

1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮:

js实现可输入可选择的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效果:

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

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

1.5说明:

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
详解handlebars+require基本使用方法
Dec 21 #Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 #Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 #Javascript
js querySelector() 使用方法
Dec 21 #Javascript
简单实现Vue的observer和watcher
Dec 21 #Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 #Javascript
js实现开启密码大写提示
Dec 21 #Javascript
You might like
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
教师求职推荐信范文
2013/11/20 职场文书
大四学生思想汇报
2014/01/13 职场文书
白血病捐款倡议书
2014/05/14 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
正规欠条模板
2015/07/03 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server