JQuery 做的下拉文本框

代码

<!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>
    <title>无标题页</title>
    <style type="text/css">
    .in {border:1px solid #ccc;padding:2px;width:100px;height:20px;margin:0px;}
    .in input{border:0;width:80px}
    .list{margin:0px;padding:0px 2px;
    border:1px solid #ccc;height:300px;width:100px;overflow-x:hidden; overflow-y:auto;display:none;z-index:99;background-color:#FFF }
    .list li{ cursor:pointer}
    </style>
    <SCRIPT src="/js/jquery-1.3.2.min.js" type=text/javascript></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('img.imgbu').click(
        function(){showList()}
        );
        $('ul.list li').click(function(){
            $('div.in input').val($(this).text());
        })
        $('ul.list li').hover(
            function(){
                $(this).css('background-color','red')
            },
            function(){

                $(this).css('background-color','')
            }
        )
    })
    var i=0;
    function showList()
    {
            var o=$('div.in').offset();
            var t=o.top+24;
            var l=o.left;
            $('ul.list').css({"top":t,'left':l}).slideDown("slow");

            $('body').mousemove(function(e){
                var t=$('ul.list').offset();
                var th=t.top+parseInt($('ul.list').css('height').replace('.px',''))
                var tw=t.left+parseInt($('ul.list').css('width').replace('.px',''))
                var eX=e.clientX;
                var eY=e.clientY;
                if(eX>tw||eX<t.left||eY<t.top-25||eY>th)
                {
                    i=window.setTimeout('SetTimeShow()',1000);
                    $('body').unbind('mousemove');
                }
             });

    }
    function SetTimeShow()
    {
        $('ul.list').slideUp("slow");
        window.clearTimeout(i);
    }
    </script>
</head>
<body>
    <div class="in"><input id="Text1" type="text" /><img src="/img/1.png" class="imgbu" /></div>
    <div>adsfasfaslfjalskdfjdaslkf</div>
    <ul class="list" style="position:absolute">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
    </ul>
    <div style="height:1000px; 1000px;"></div>
</body>
</html>