jquery——搜索框自动弹出下拉式菜单

/**
搜索框自动弹出下拉式菜单

注意里面有两个localhost的地址需要修改。
http://localhost/index.php?app=event&mod=MdEvent&act=md_search 是用ajax提交的网址，返回的是一个json字符串。如下：
["2012ccc","2012ab","2012ddd","2012qqq","2012www","2012vvv","2012bbb"]

其实这个东西再加工一下可以变成一个函数其他地方直接套用就可以，嘿嘿嘿。

*/


<script type="text/javascript" src="public/js/jquery.js"></script>
    <div class="search"  style="padding:0; margin:5px 0 0 0; float:left">
        <input value="<?php echo $_GET['search']; ?>" type="text" id="search_txt" class="search_txt" style="width:180px; height:35px; margin-top:1px;float:left; color:#777777; border-right:none; padding-left:10px"/>
        <input class="search_btn"  type="button" onclick="search()" value="" style="width:35px; height:37px; background:url(__THEME__/images/search_sch.gif) no-repeat;margin-top:1px; float:left;border:1px solid #bdc7d8; border-width:1px 1px 1px 0"/>
        <style type="text/css">
            .search_alert{
                 background:#00FF00;
                position:absolute;
                width:226px;
                z-index:999;
            }
            .search_alert_item{
                background-color: #FFFFEE;
                font-family: 微软雅黑;
                font-weight: 700;
                padding: 3px 2px;
                text-align: left;
                height:18px;
                overflow:hidden;
            }
            .search_alert_active{
                background: none repeat scroll 0 0 #33CCFF;
                color: white;
                font-family: 微软雅黑;
                font-weight: 700;
                padding: 3px 2px;
                text-align: left;
                height:18px;
                overflow:hidden;
            }
        </style>
        
        
        <script type="text/javascript">
            search_alert = 0;//用于记录是按的第几个内容了。
               $(document).ready(function(){
                //搜索框绑定键盘事件！
                $('#search_txt').bind('keyup', function(event){
                    if (event.keyCode=="13"){ /*回车键执行的东西。*/
                        search();
                    }else if(event.keyCode=="40"){/*向下键执行的东西。*/
                        $("#search_alert div").attr("class","search_alert_item");
                        search_alert = search_alert+1;
                        if($("#search_alert div").length < search_alert){
                            search_alert = 1;
                        }
                        $("#search_alert div:nth-child("+search_alert+")").attr("class","search_alert_active");
                        $('#search_txt').val($("#search_alert div:nth-child("+search_alert+")").text());
                    }else if(event.keyCode=="38"){/*向上键执行的东西*/
                        $("#search_alert div").attr("class","search_alert_item");
                        search_alert = search_alert-1;
                        if(search_alert <1){
                            search_alert = $("#search_alert div").length;
                        }
                        $("#search_alert div:nth-child("+search_alert+")").attr("class","search_alert_active");
                        $('#search_txt').val($("#search_alert div:nth-child("+search_alert+")").text());
                        ;
                    }else{
                        $.post("http://localhost/index.php?app=event&mod=MdEvent&act=md_search",{"key":$('#search_txt').val()}, function(data){
                            $('div').remove('#search_alert');
                            if(data != "null"){
                                $('body').append('<div class="search_alert" id="search_alert" style="display:none;"></div>');
                                var offset = $("#search_txt").offset();
                                $(".search_alert").css({ left:offset.left , top: offset.top+37 });
                                $.each(data, function(i, n){
                                    $('#search_alert').append('<div class="search_alert_item" onclick="javascript:search_item_click(this)" title="'+n+'">'+n+"</div>");
                                });
                                $('#search_alert').show();
                                //鼠标事件。
                                $('.search_alert_item').bind({
                                    //单击事件。
                                    click:function(){
                                        $('#search_txt').val($(this).text());
                                        $('#search_alert').hide();
                                        search();
                                    },
                                    //鼠标放在对象上。
                                    mouseover:function(){
                                        search_alert = $(this).index() + 1;
                                        $("#search_alert div").attr("class","search_alert_item");
                                        $(this).attr("class","search_alert_active");
                                    },
                                    //鼠标离开对象时触发。
                                    mouseout:function(){
                                        search_alert = 0 ;
                                        $(this).attr("class","search_alert_item");
                                    }
                                });
                                //鼠标事件 end    
                            }            
                        }, "json");
                    }
                });
                /*失去焦点的时候执行的*/
                $('#search_txt').blur(function (){
                    $('div').remove('#search_alert');
                });
                /*获得焦点的时候执行*/
                $('#search_txt').focus(function (){
                    $('#search_txt').select();
                });
            });
            
            function search(){
                if($("#search_txt").val() != ""){
                    window.location.href = "http://localhost/schedule?search=" + $("#search_txt").val();/*搜索完需要跳转的网址*/
                }else{
                    window.location.href = "http://localhost/schedule";
                }
            };
        </script>
    </div>