百度搜索智能提示案例jsonp

来源：互联网发布：旋转秋千知乎编辑：程序博客网时间：2024/05/19 00:12
百度搜索框智能提示
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>百度下拉_sug-jquery</title>    <script src="jquery-1.11.3.js"></script>    <style>        #sug{            position: absolute;            left: 50%;            margin-left: -150px;            margin-top: 200px;            width: 300px;            background: lightGreen;            height: 40px;            text-align: center;        }        #sug input{            margin-top: 10px;        }        #list{            position: absolute;            left: 50%;            top:50px;            width: 200px;            margin-left: -150px;            margin-top: 200px;            height: auto;            background: lightBlue;        }        #list ul{            padding-left: 0px;            margin: 0px;        }        #list ul li{            background: lightGray;            line-height: 30px;            list-style: none;            padding-left: 10px;            margin-top: 0px;            cursor: pointer;        }        #list ul li.on{            background: lightGreen;        }    </style></head><body>    <div id="sug">        <div>            <input type="text" id="keyWord" autocomplete=off>            <input type="button" value="百度一下" id="btn">        </div>    </div>    <div id="list">    </div>    <script>        $(function(){            $("#keyWord").keyup(function(e){                var kd = $("#keyWord").val();                var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+kd;                querySUG(url);            });        });        function querySUG(url){        document.getElementById('list').innerHTML = '';        $.ajax({            type : "get",            async: true,            url : url,            dataType : "jsonp",            jsonp: "cb",            jsonpCallback:"callback",            success : function(data){                var ul = $("<ul></ul>");                $.each(data.s,function(i,element){                    var e = $("<li></li>").append(element);                    $(ul).append(e);                });                $("#list").append(ul);            },            error:function(){                console.log('fail');            }        });    }    </script></body></html>
0 0