<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1">

    <title>1223</title>

    <script src="JsTree/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var data = [{ ShippingMethod: '快10', ArrivalDays: 10 }, { ShippingMethod: '中20', ArrivalDays: 20 }, { ShippingMethod: '慢40', ArrivalDays: 40}]

        function ShowData() {

            var html = ' <div  style="display:Block"> ';

            var search = $.trim($("#txtShippingMode").val());

            for (var i = 0; i < data.length; i++) {

                html += ' <div class="list notonList" onmouseover="setOnlist(this);" onclick="CheckIt(\'' + data[i].ShippingMethod + '\',' + data[i].ArrivalDays + ');"' + '" >'

                + data[i].ShippingMethod + '</div>';

            }

            html += ' </div>';

            $("#SerachContent").html(html);

            ContentBox2show();

        }

        function ContentBox2show() {

            var A_top = $("#txtShippingMode").offset().top + $("#txtShippingMode").outerHeight(true) + 10;  //  1

            var A_left = $("#txtShippingMode").offset().left;

            $("#ContentBox2").show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });

        }

        function setOnlist(o) {

            $(".list").removeClass("onList");

            $(o).addClass("onList");

        }

        function CheckIt(Skey, SValue) {

            $("#txtShippingMode").val(Skey);

        }

        //通过点击位置，判断弹出的显示

        $(document).mouseup(function (event) {

            //如果是点击textbook则显示下拉列表，其他位置隐藏

            if (event.target == $("#txtShippingMode").get(0)) {

                ShowData();

            }

            else {

                $("#ContentBox2").hide();

            }

        });

    </script>

    <style type ="text/css" >

         .list {

            padding: 0px 10px;

            height: 28px;

            line-height: 28px;

            overflow: hidden;

        }

        .notonList {

            background-color: White;

        }

        .onList {

            background-color: #2577E3;

        }

    </style>

</head>

<body>

    <form name="frmObj" runat="server" id="frmObj">

    <div>

        <asp:TextBox ID="txtShippingMode" runat="server" MaxLength="100" Width="120px"></asp:TextBox>

        <div id="ContentBox2"  style="display: none; background-color: rgb(255, 255, 255);

            z-index: 980; position: absolute; top: 120px; width: 100px;">

            <div  id="SerachContent" style="width: 125px; border: 1px solid #ddd;

                padding: 0px 0px; margin-top: -12px;">

            </div>

        </div>

    </div>

    </form>

</body>

</html>