jquery+ajax 实现搜索框提示

时间：2017-03-21 13:04:38 阅读：327 评论：0 收藏：0 [点我收藏+]

标签：index title get line res sea ready pos success

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #search_result{
            width:302px;
            position:absolute;
            left:618px;
            top:180px;
            z-index:1;
            overflow:hidden;
            background:#dcf6f8;
            border:#c5dadb 1px solid;
            border-top:none;
        }
        .line{
            font-size:12px;
            color:#000;
            background:#aed34f;
            width:302px;
            padding:2px;
        }
        .hover{
            background:#007ab8;
            color:#fff;
        }
    </style>
</head>
<body>
<script>
    $(document).ready(function(){
        $(‘#search‘).keyup(function(){
            $.ajax{
                type:‘GET‘,
                url:‘include/ajax_search.php‘,//处理页面的url地址
                data:‘txt_search=‘+escape($(‘#search‘).val()),//要传递参数
                success:function(data){
                    if(data!=‘‘){
                        var ss;
                        ss=data.split("@");
                        var layer;
                        layer="<table>";
                        for(var i=0;i<ss.length-1;i++){
                            layer+="<tr><td class=‘line‘>"+ss[i]+"</td></tr>";
                        }
                        layer+="</table>"
                        $(‘#search_result‘).empty();
                        $(‘#search_result‘).append(layer);
                        $(‘.line:first‘).addClass(‘hover‘);
                        $(‘#search_result‘).css(‘display‘,‘‘);
                        $(‘.line‘).hover(function(){
                            $(‘.line‘).removeClass(‘hover‘);
                            $(this).addClass(‘hover‘);
                        },function(){
                            $(this).removeClass(‘hover‘);
                        });
                        $(‘.line‘).click(function(){
                            $(‘#search‘).val($(this).text());
                        })
                    }else{
                        $(‘#search_result‘).empty();
                        $(‘#search_result‘).css(‘display‘,‘none‘);
                    }

                },
                error(function() {
                    alert(‘O No~~~~‘);
                });
            }esle if(keyCode==38){
                $(‘#aa tr.hover‘).prev().addClass(‘hover‘);
                $(‘#aa tr.hover‘).next().removeClass(‘hover‘);
                $(‘#search‘).val($(‘#aa tr.hover‘).text());
            }else if(keyCode==40){
                $(‘#aa tr.hover‘).next().addClass(‘hover‘);
                $(‘#aa tr.hover‘).prev().removeClass(‘hover‘);
                $(‘#search‘).val($(‘#aa tr.hover‘).text());
            }
        });
    });
    $(document).ready(function(){
        $().click(function(){
            $(‘#search_result‘).empty();
            $(‘#search_result‘).css(‘display‘,‘none‘);
        });
    });
</script>
    
</body>
</html>

jquery+ajax 实现搜索框提示

标签：index title get line res sea ready pos success

原文地址：http://www.cnblogs.com/greatluoluo/p/6593605.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行