[JavaScript]input框输入数据后下面筛选提示数据----封装inputselect.js
来源:互联网 发布:nginx 403 页面定制 编辑:程序博客网 时间:2024/05/17 07:38
关键代码
工作中会需要使用到在文本框输入值的时候能够对待选值进行过滤,所以呢对其进行了简单的封装,下面给出部分核心代码
/*************************************** ******************使用说明*************** **************Created by David J******** ****该js依赖于jQuery引入事需要先引入jquery库文件 ** * 如下引入顺序: * <script type="text/javascript" src="jquery-1.9.1.min.js"></script> * <script type="text/javascript" src="inputselect.js"></script> * * 使用方式如下: * <input type="text" id="textInput" onchange="changeText()"> * <script type="text/javascript"> * var totalValues = ['abc','alike','aband','b','boy','body','c','cat','cook','d','dog','dot','date']; * function changeText(){ //第一个参数是input框的id 第二个参数是可选值 第三个参数是一些配置信息 * showTip("textInput",totalValues,{backgroundColor:"red"}); * } * </script> * * * 默认配置信息: * * backgroundColor: 列表值背景 如 "#ffffff", * hoverBackgroundColor: 当鼠标悬浮时的背景色 如"#BFEFFF", * divHeight: 显示提示框的高度 如"100px", * divWidth: 显示提示框的宽度 如"200px", * divBorder: 显示框的边框定义 如 "1px solid gray", * overflowY: 显示框默认的overflowY属性 "scroll" * inputHeight: 显示框默认高度为20 * top: 0 如果是0则自动计算高度 大于0则表示用于自定义 * */ /** * 显示提示信息 * inputId:输入input框的id值 * totalValues:所有可选的值 */ function showTip(inputId,totalValues,configs){ var _inputNode = $("#"+inputId)[0], _inputValue = _inputNode.value, _parentNode = _inputNode.parentNode, _divNode = document.createElement("div"); //如果已经存在了divNode 则删除 var _lastDivNode = $("#"+inputId+"_div")[0]; if(_lastDivNode) _parentNode.removeChild(_lastDivNode); //如果没有输入值的时候则无需显示提示框 if(_inputValue == '') return; var config = { backgroundColor: "#F0F8FF", hoverBackgroundColor: "#BFEFFF", divHeight: "100px", divWidth: "200px", divBorder: "1px solid gray", divBackgroundColor: '#ffffff', overflowY: "scroll", inputHeight: 20, top: 0 }; console.log(_inputNode); $.extend(true,config,configs); var _offsetPosition = getPosition(_inputNode); //显示待选div样式 _divNode.id = inputId+"_div"; _divNode.style.backgroundColor = config.divBackgroundColor; _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"; if(config.top > 0) _divNode.style.top = config.top; else _divNode.style.top = (_offsetPosition.y+config.inputHeight)+"px"; _divNode.style.left = _offsetPosition.x+"px"; //第一次加载的时候初始化样式文件 var _headNode = $("head")[0]; var _cssNode = document.createElement("style"); var _cssContent = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}"; _cssContent += "#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}"; _cssNode.innerHTML = _cssContent; _headNode.appendChild(_cssNode); _divNode.innerHTML = ""; var _divHtml = ""; var _isExist = false; //用于判断是否存在需要提示的信息 如果是否则无需显示提示框 for(var i=0;i<totalValues.length;i++){ var _tempValue = totalValues[i]; if(isIncluded(_tempValue,_inputValue)){ _isExist = true; _divHtml += "<div onclick='_inputDivClick(\""+inputId+"\",\""+_divNode.id+"\",\""+_tempValue+"\")'>"+_tempValue+"</div>"; } } _divNode.innerHTML = _divHtml; if(_isExist) _parentNode.appendChild(_divNode); } /** * _inputDivClick 当选中一个下拉列表选项时触发 * inputNodeId: 输入框的id * divNodeId: 自动创建的div的id * value: 待选值 */ function _inputDivClick(inputNodeId,divNodeId,value){ var inputNode = $("#"+inputNodeId)[0], divNode = $("#"+divNodeId)[0]; inputNode.value = 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; }
测试Demo
<!DOCTYPE html><html><head> <title>文本框输入时下拉提示匹配文本</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="inputselect.js"></script></head><body><input type="text" id="textInput" onchange="changeText()"><script type="text/javascript"> var totalValues = ['abc','alike','aband','b','boy','body','c','cat','cook','d','dog','dot','date','ha','hi','alot']; function changeText(){ showTip("textInput",totalValues,{backgroundColor:"#FAFAD2"}); }</script></body></html>
效果展示
源文件
http://download.csdn.net/detail/u010989191/9663941
0 0
- [JavaScript]input框输入数据后下面筛选提示数据----封装inputselect.js
- vuejs绑定数据到select中,选择option数据后,同步改变下面一个输入框input的值
- 用户在文本框输入数据,文本框下面自动提示
- input数据框显示提示文字代码
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- input输入框下拉提示、js的keyup的实现、
- AngularJS学习-(左侧导航栏筛选、input输入框筛选)
- 仿百度搜索框,文本框输入值后提示框显示数据(JQuery+Struts2)
- Struts2+jQuery+JSON 实现输入关键字后提示框显示数据
- TextWatcher实现输入关键字筛选数据
- 两表连接后,筛选重复数据
- 复制自动筛选后的数据区域
- <input>输入框提示输入内容
- html input输入框提示输入内容
- 更新数据后弹出提示框代码
- 数据筛选
- js input输入框输入自动提示--在网上找的,记录一下
- js 回退键清空输入数据
- 基础概念5
- 123的微博
- 用padding值模拟实现导航
- HDU 4548 美素数(素数筛+预处理)
- [HNOI2013]切糕
- [JavaScript]input框输入数据后下面筛选提示数据----封装inputselect.js
- NVIDIA GPU 2016
- spring中FileSystemXmlApplicationContext和ClassPathXmlApplicationContext的类图
- 易语言逆向分析1
- Java单例模式的应用示例
- JAVA 生产者消费者
- cadence16.5与allegro无法交互
- Python内建函数:filter
- 走遍中国 —— 大西南