[Javascript]inputselect1.1.js解除与jquery.min.js的依赖

来源：互联网发布：外汇交易中心软件开发编辑：程序博客网时间：2024/05/14 09:20
继http://blog.csdn.net/u010989191/article/details/52927654后更新
    /***************************************    ******************使用说明***************    **************Created by David J********    ****该js依赖于jQuery引入事需要先引入jquery库文件    **    *   如下引入顺序：    *   <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 = document.getElementById(inputId),            _inputValue = _inputNode.value,            _parentNode = _inputNode.parentNode,            _divNode = document.createElement("div");        //如果已经存在了divNode 则删除        var _lastDivNode = document.getElementById(inputId+"_div");        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(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 = document.getElementsByTagName("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 = document.getElementById(inputNodeId),            divNode = document.getElementById(divNodeId);        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);    }    /**    * extend 用于复写配置文件的信息 用newConfigs中的配置覆盖configs中的    * configs: 结果配置信息    * newConfigs: 外部配置信息    */    function extend(configs,newConfigs){        for(var name in newConfigs)        {            if(configs[name]){                configs[name] = newConfigs[name];            }        }    }    //将要获取绝对位置的标签传进去，返回一个包含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;    }
0 0