jquery 百度搜索

最新推荐文章于 2021-04-21 09:55:06 发布

weixin_42069386

最新推荐文章于 2021-04-21 09:55:06 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/weixin_42069386/article/details/84962271

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度搜索</title>
    <script src="js/jquery-3.0.0.js"></script>
    <script>
        $(function(){
            $("#search").on("keyup",function(){
                var value=$(this).val();

                $.ajax({
                    method:"post",
                    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getdata&wd="+value,
                    dataType:"jsonp",
//                    jsonpCallback:"getdata",
                    success:function(data){
                        $(".block").find("ul").remove();
                        var text=data.s;
                        //动态创建dom元素
                        var ul=$("<ul></ul>");
                        ul.addClass("ul_pos");
                        for(var i=0;i<text.length;i++){
                            var li_child=$("<li></li>");
                            li_child.bind("click",function(){
                                var text_val=$(this).text();
                                $("#search").html(text_val);
                                $(this).parent("ul").remove();
                            });
                            li_child.html(text[i]);
                            var a=$("<a href='https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+text[i]+"'></a>");
                            a.append(li_child);
                            ul.append(a);
                        }
                        $(".block").append(ul);
                    }
                })

                $(".baidu").click(function (){
                    var txt=$("#search").val();
                    /* window  location  history*/
                    location.href="https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+txt;
                });
            })
        })
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            position: relative;
            border: 1px solid black;
            width: 600px;
            height: 50px;
            margin: 10% auto;
        }
        #search{
            width: 470px;
            height: 50px;
            line-height: 50px;
            border-style: none;
            outline: none;
            padding-left: 10px;
            float: left;
            font-size: 20px;
        }
        .baidu{
            display: inline-block;
            float: left;
            height: 50px;
            width: 120px;
            text-align: center;
            line-height: 50px;
            background-color: #2c99ff;
            color: white;
            cursor: pointer;
        }
        .baidu:hover{
            background-color: blue;
        }
        .ul_pos{
            position: absolute;
            top: 50px;
            left: -1px;
            width: 480px;
            border: 1px solid black;
        }
        .ul_pos li{
            list-style: none;
            padding-left: 15px;
            line-height: 30px;
            font-size: 16px;
        }
        .ul_pos>a{
            text-decoration: none;
            color: black;
            font-weight: bold;
        }
        .ul_pos li:hover{
            background-color: #c0c0c0;
        }
    </style>
</head>
<body>
<div class="block">
    <input type="text" id="search"/>
    <span  class="baidu">百度一下</span>
</div>
</body>
</html>

weixin_42069386

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 百度搜索

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度搜索&lt;/title&gt; &lt;script src="js/jquery-3.0.0.js"&gt
复制链接

扫一扫