百度搜索建议实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索建议</title>
    <script src="./js/lib/jquery-2.2.4/jquery-2.2.4.min.js"></script>
    <style>
        *{margin:0;padding:0;}

        #box{
            width:800px;
            height: 300px;
            margin: 300px auto;
        }

        #keyword{
            width:800px;
            height: 50px;
            border:solid 1px #000000;
            border-radius: 4px;
            font-size: 20px;
        }

        ul{
            list-style: none;
        }
        ul li{
            color:#888;
            font-size: 18px;

        }
    </style>
</head>
<body>
<div id="box">
    <input type="text" name="keyword" id="keyword" placeholder="请输入要查询的信息">
    <ul id="advice">
        <!--<li>搜索建议</li>-->
        <!--<li>搜索建议</li>-->
        <!--<li>搜索建议</li>-->
        <!--<li>搜索建议</li>-->
    </ul>
</div>

<script>
    $(function () {
        //添加按键抬起事件
        $("#keyword").keyup(function(){
            //获取框中的数据
            var $_messg = $("#keyword").val();

            //发送Ajax请求
            $.ajax({
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&p=3&sid=&req=2&bs=%E7%81%AB%E8%BD%A6%E7%A5%A8%E8%AE%A2%E8%B4%AD%E7%BD%91%E7%AB%9912306&pbs=%E7%81%AB%E8%BD%A6%E7%A5%A8%E8%AE%A2%E8%B4%AD%E7%BD%91%E7%AB%9912306&csor=2&pwd=%E7%81%AB&cb=?",
                type:"get",
                dataType:"jsonp",
                data:{
                    "wd":$_messg
                },
                success:function(data){
                    //每次输入前都清空
                    $("#advice").empty();
                    //获取到的所有数据
                    console.log(data.g);

                    for(var i = 0;i<data.g.length;i++){
                        //创建li标签
                        var $li = $("<li>");

                        $li.text(data.g[i].q);

                        $("#advice").append($li)
                   }
                },
                error:function () {
                    console.log('失败了');
                }
            })
        })
    })
</script>
</body>
</html>
百度搜索建议实现

猜你喜欢
