JavaEE学习总结(6) - Ajax+Jquey实现模糊查询提示

最新推荐文章于 2022-09-12 08:31:49 发布

b9x_

最新推荐文章于 2022-09-12 08:31:49 发布

阅读量772

点赞数

分类专栏：学习总结，javaee

本文链接：https://blog.csdn.net/b9x__/article/details/79243102

版权

学习总结，javaee 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

做小项目时用到的根据输入提示用户 ,ajax+jquey实现

<script type="text/javascript">
    $(function() {
        $("#txt_search").keyup(function(evt){
                ChangeLocation();
                var k = window.event ? evt.keyCode : evt.which;
                if ($("#txt_search").val()!= "" && k!=38&& k!= 40 && k != 13) {
                            $.get("addUserMobile.do",{mobile_Number:$("#txt_search").val()},function(data){
                                    if (data.length > 0){
                                        var str = "";
                                        str = "<table id='aa'>";
                                        for(var i=0;i<data.length;i++){
                                            str += "<tr class='line'><td class='std'>"+ data[i]+ "</td></tr>";
                                        }
                                         str+= "</table>";
                                        //将结果添加到div中
                                        $("#searchresult").empty();
                                        $("#searchresult").append(str);
                                        $(".line:first").addClass("hover");
                                        $("#searchresult").css("display", "");
                            $(".line").hover(function({$(".line").removeClass("hover");
                                                            $(this).addClass("hover");},
                                                        function() {
                                                        $(this).removeClass("hover");
                                                        });
                                        //其他事件
                                        $(".line").click(function() {$("#txt_search").val($(this).text());
                                                            $("#searchresult").css("display","none");
                                                        });
                                    } else {
                                        $("#searchresult").empty();
                                        $("#searchresult").css(
                                                "display", "none");
                                    }
                                //}
                        },"json");
                } else if (k == 38) {
                    $('#aa tr.hover').prev().addClass("hover");
                    $('#aa tr.hover').next().removeClass("hover");
                    $('#txt_search').val($('#aa tr.hover').text());
                } else if (k == 40) {
                    $('#aa tr.hover').next().addClass("hover");
                    $('#aa tr.hover').prev().removeClass("hover");
                    $('#txt_search').val($('#aa tr.hover').text());
                } else if (k == 13) {
                    $('#txt_search').val($('#aa tr.hover').text());
                    $("#searchresult").empty();
                    $("#searchresult").css("display", "none");
                } else {
                    $("#searchresult").empty();
                    $("#searchresult").css("display", "none");
                }
            });
    $("#searchresult").bind("mouseleave", function() {
    $("#searchresult").empty();
    $("#searchresult").css("display", "none");
});


    });
    //设置div的位置
    function ChangeLocation() {
        var left = $("#txt_search").position().left;
        var top = $("#txt_search").position().top + 20;
        $("#searchresult").css("left", left + "px"); 
        $("#searchresult").css("top", top + "px"); 
    }
</script>