css javascript autocomplete

最新推荐文章于 2021-09-29 11:27:25 发布

java_mail_test

最新推荐文章于 2021-09-29 11:27:25 发布

阅读量122

点赞数

分类专栏： jquery 文章标签： CSS JavaScript HTML IE 浏览器 ViewUI

jquery 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <style>
            #belowDiv {
                border : solid 1px;
                background-color:red;
            }
            #bigDiv {
                margin:100 0 0 100;
            }
            #hiddenDiv {
                position : absolute;
                display : none;
                border : solid 1px;
                z-index:999999;
                left : 0;
                top : 0;
            }
            #hiddenDiv ul {
                margin-left:0px;
                margin-top : 0px;
                margin-bottom : 0px;
            }
            #hiddenDiv ul li {
                list-style-type : none;
                background-color:white;
                text-align:left;
                margin-left:0px;
            }

            #myComplete {
                width:200px;
            }

        </style>
        <script>
        var currentIndex = -1;
            function completeFunction(event) {
                var target = event.target?event.target:event.srcElement;
                var inputValue = target.value;
                inputValue = inputValue.replace(/[\s]+/g , "");
                if(inputValue != "") {
                    //得到html代码
                    var html = getItems();
                    //将 hiddenDiv 中的内容设置为html
                    var displayDiv = document.getElementById("hiddenDiv");
                    displayDiv.innerHTML = html;
                    //将其显示属性设置为显示
                    displayDiv.style.display = "block";
                    //得到输入框的宽度
                    var inputArea = document.getElementById("myComplete");
                    var inputWidth = getStyle(inputArea , "width");
                    //为hiddenDiv赋值宽度
                    displayDiv.style.width = inputWidth;
                    //获得左上角点坐标
                    var inputLeft = inputArea.offsetLeft;
                    var inputTop = inputArea.offsetTop;
                    var height = inputArea.offsetHeight;
                    //设置
                    displayDiv.style.left = inputLeft;
                    displayDiv.style.top = inputTop + height;
                    //监控按键，查看是否为上下和回车
                    var keyCode = event.keyCode;
                    //下40 上38 回车13
                    //得到一共多少个
                   var arrs = document.getElementsByTagName("LI");
                   var totalLength = arrs.length;
                    //处理上下键开始
                    if(keyCode == 40 || keyCode == 38 || keyCode == 13) {
                    if(keyCode == 40) {
                     currentIndex++;
                     if(currentIndex == (totalLength)) {
                       currentIndex = 0;
                     }
                    } else if(keyCode == 38) {
                      currentIndex--;
                      if(currentIndex == -1) {
                       currentIndex = totalLength - 1;
                     }
                    } else if(keyCode == 13) {
                      var selectValue = arrs[currentIndex].innerHTML;
                      //赋值
                      inputArea.value = selectValue;
                      //hiddenDiv消失
                      displayDiv.style.display = "none";
                      currentIndex = -1;
                    }
                    for(var i = 0 ; i < arrs.length ; i++) {
                      if(currentIndex == i) {
                       arrs[i].style.backgroundColor = "blue";
                      } else {
                       arrs[i].style.backgroundColor = "white";
                      }
                    }
                    }
                    //处理上下键结束
                }
            }

            function getItems() {
                var html = "<ul>";
                html += "<li οnmοuseοver=\"changeBackground(event,'blue')\" οnmοuseοut=\"changeBackground(event , 'white')\" οnclick='chooseWhich(event)'>1111111</li>";
                html += "<li οnmοuseοver=\"changeBackground(event,'blue')\" οnmοuseοut=\"changeBackground(event , 'white')\" οnclick='chooseWhich(event)'>1111112</li>";
                html += "<li οnmοuseοver=\"changeBackground(event,'blue')\" οnmοuseοut=\"changeBackground(event , 'white')\" οnclick='chooseWhich(event)'>1111113</li>";
                html += "<li οnmοuseοver=\"changeBackground(event,'blue')\" οnmοuseοut=\"changeBackground(event , 'white')\" οnclick='chooseWhich(event)'>1111114</li>";
                html += "<li οnmοuseοver=\"changeBackground(event,'blue')\" οnmοuseοut=\"changeBackground(event , 'white')\" οnclick='chooseWhich(event)'>1111115</li>";
                html += "</ul>";
                return html;
            }

            //获得dom css的方法
            function getStyle( elem, name )
            {
                //如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
                if (elem.style[name])
                {
                    return elem.style[name];
                }
                //否则，尝试IE的方式
                else if (elem.currentStyle)
                {
                    return elem.currentStyle[name];
                }
                //或者W3C的方法，如果存在的话
                else if (document.defaultView && document.defaultView.getComputedStyle)
                {
                    //它使用传统的"text-Align"风格的规则书写方式，而不是"textAlign"
                    name = name.replace(/([A-Z])/g,"-$1");
                    name = name.toLowerCase();
                    //获取style对象并取得属性的值(如果存在的话)
                    var s = document.defaultView.getComputedStyle(elem,"");
                    return s && s.getPropertyValue(name);
                //否则，就是在使用其它的浏览器
                }
                else
                {
                    return null;
                }
            }
            //改变div的背景色
            function changeBackground(event , color) {
    var target = event.target ? event.target : event.srcElement;
                target.style.backgroundColor = color;
            }
            //更改里面的值
            function chooseWhich(event) {
                var target = event.target ? event.target : event.srcElement;
                //得到值
                var innerHTML = target.innerHTML;
                //得到输入框
                var inputArea = document.getElementById("myComplete");
                //设置输入框中的值
                inputArea.value = innerHTML;
                //将hiddenDiv显示属性设置为隐藏
                var showDiv = document.getElementById("hiddenDiv");
                showDiv.style.display = "none";
                currentIndex = -1;
            }
        </script>
    </head>
    <body>
        <div id="bigDiv">
            <input type="text" id="myComplete" οnkeyup="completeFunction(event)"/>
            <div id="belowDiv">
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
            </div>
        </div>
        <div id="hiddenDiv">

        </div>
    </body>
</html>

java_mail_test

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css javascript autocomplete

&lt;html&gt; &lt;head&gt; &lt;style&gt; #belowDiv { border : solid 1px; background-color:red; } #bigDiv { margin...
复制链接

扫一扫