Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现可输入可选择的 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 框架很简单和方便的实现功能,但这种是最原始的,或许还有点麻烦,参考参考。
来源: http://www.phperz.com/article/17/0704/329316.html