自个儿写的 _Web前端

自己写的
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>测试</title>
    <script>
        function Setlocation() {
            var txtshort = document.getElementById("txtShortName");
            var divshort = document.getElementById("showShortName");

            var postions = GetPosition(txtshort);
			divshort.style.top = postions[0] + 21;
            divshort.style.left  = postions[1];
            divshort.style.width = txtshort.style.width;

            var lis = document.getElementById("shortNameli").getElementsByTagName("li");
            var dheight = 0;
            for (var i = 0; i < lis.length; i++) {
                if (lis[i].style.display == "block") {
                    dheight += 19;
                }
            }
            if (dheight >= 200) {
                dheight = 200;
            }
			
			divshort.style.height = dheight;
            divshort.style.display = "block";
            divshort.style.zIndex = 999;

        }

        function hideShort() {
            var txtshort = document.getElementById("txtShortName");
            var divshort = document.getElementById("showShortName");
            var bgIframe = document.getElementById("bgIframe");
			  if (!CheckActiveElement(txtshort) && !CheckActiveElement(divshort))
                divshort.style.display = "none";
        }

        function setTextValue(obj) {
            document.getElementById("txtShortName").value = obj.innerText;
            document.getElementById("txtShortName").blur();
            document.getElementById("showShortName").blur();
            hideShort();
        }

        function filterShortName(objValue) {
            var parent = document.getElementById("shortNameli");
            var lis = document.getElementsByTagName("li");

            if (objValue == "") {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.display = "block";
                }
            } else {
            var regexpvalue = "^" + objValue.toUpperCase();
                var regexp = new RegExp(regexpvalue);
                for (var i = 0; i < lis.length; i++) {
                    if (regexp.test(lis[i].innerText)) {
                        lis[i].style.display = "block";
                    } else {
                        lis[i].style.display = "none";
                    }
                }
            }
            Setlocation();
        }

        //判断活动对象是否为obj对象的从属对象
        function CheckActiveElement(obj) {
            var isAe = false;
            var objtemp = document.activeElement;
            while (objtemp != null) {
                if (objtemp == obj) {
                    isAe = true;
                    break;
                }
                objtemp = objtemp.parentElement;
            }
            return isAe;
        }
        //获取文本框的位置
        function GetPosition(objInput) {
            var top = 0, left = 0;
            var obj = objInput;
            do {
                top += obj.offsetTop;         //距离顶部
                left += obj.offsetLeft;       //距离左边
            }
            while (obj = obj.offsetParent);

            var arr = new Array();
            arr[0] = top;
            arr[1] = left;
            return arr;
        }
    </script>

    <style type="text/css">
        .style3
        {
            width: 228px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" onclick="hideShort()">
    <div>
        

        <div id="searchDIV" runat="server" style="text-align: left;">输入值：
              <input type="text" id="txtShortName" runat="server"  style="width:300px;height:21px;"  onfocus="Setlocation();"
                onkeyup="filterShortName(this.value)">
    </div>
    <div>


    </div>
    <div id="showShortName" style="position: absolute; overflow: auto; display: none;
        z-index: 999; background-color: #FFF;">
        <ul id="shortNameli" style="list-style: none; text-align: left; width: 100%; margin: 0px;
            border: 0px; padding: 0px;">
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/6-23</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/6-24</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/6-25</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/7-6</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/7-7</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/7-8</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/7-9</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-01/8-1</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-02/6-23</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-02/6-24</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-02/6-25</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-02/7-6</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-02/7-7</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-02/7-8</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-03/6-23</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-03/6-24</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-03/6-25</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-03/7-6</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-03/7-7</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-03/7-8</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-04/6-23</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-04/6-24</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-04/6-25</li>
                
                    <li style="cursor: hand; display:block; padding-left: 5px;" onmouseover='this.style.backgroundColor="Lime";'
                        onmouseout='this.style.backgroundColor="#fff";' onclick="setTextValue(this)">
                        SG01-04/7-6</li>

        </ul>
    </div>
    
    </form>
</body>
</html>