jsonp 百度搜索框

转载于：https://www.cnblogs.com/xiaohuochai/p/6568039.html

<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{color:inherit;text-decoration: none;}
input{padding: 0;border: 0;}
.box{width: 340px;height: 38px;border: 2px solid gray;}
.con{overflow: hidden;}
.input{float: left;width: 300px;height: 38px;}
.search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}
.list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;}
.in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;}
.list .in:last-child{margin-bottom: -1px;}
.in:hover{background-color: #f9f9f9;}
</style>

<div class="box" id="box">
    <div class="con">
        <input class="input" id="search">
        <a target="_blank" id="btn" href="javascript:;" class="search"></a>
    </div>
    <ul class="list" id="list"></ul>        
</div> 
<script>
function loadScript(url){
    loadScript.mark = 'load';
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
function callback(data){
    if(data){
        var arr = data.s;
        var html = '';
        for(var i = 0,len = arr.length; i < len; i++){
            html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank' style='display:block'>" + arr[i]+ "</a></li>"
        }
        list.innerHTML = html;        
    }
}
search.onkeyup = function(e){
    e = e || event;
    if(e.keyCode == '13'){
       window.open('https://www.baidu.com/s?wd=' + this.value);
    }
    if(this.value){
        if(search.data != this.value){
            btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value);
            var that = this;
            loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback");
        }
    }else{
        list.innerHTML = '';
    }
    search.data = this.value;
}
search.onclick = function(e){
    e = e || event;
    list.style.display = 'block';
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}
document.onclick = function(){
     list.style.display = 'none';
}
</script>

jquery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        margin: 0;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    input {
        padding: 0;
        border: 0;
    }

    .box {
        width: 340px;
        height: 38px;
        border: 2px solid gray;
    }

    .con {
        overflow: hidden;
    }

    .input {
        float: left;
        width: 300px;
        height: 38px;
    }

    .search {
        width: 38px;
        height: 38px;
        float: right;
        background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;
    }

    .list {
        position: absolute;
        width: 298px;
        border: 1px solid #e6e8e9;
        overflow: hidden;
    }

    .in {
        line-height: 30px;
        border-bottom: 1px solid lightblue;
        cursor: pointer;
        text-indent: 1em;
    }

    .list .in:last-child {
        margin-bottom: -1px;
    }

    .in:hover {
        background-color: #f9f9f9;
    }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="con">
            <input class="input" id="search" data-a="aa">
            <a target="_blank" id="btn" href="javascript:;" class="search"></a>
        </div>
        <ul class="list" id="list"></ul>
    </div>
</body>

</html>
<script type="text/javascript" src="../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$('#search').bind('keyup', function(e) {
    var that = this;
    if (e.keyCode == 13) {
        window.open('https://www.baidu.com/s?wd=' + $(this).val());
        //跳转到百度
    }
    if ($(this).val()) {
        if ($(this).data('a') != $(this).val()) { //不允许搜索aa
            $('#btn').attr('href', 'https://www.baidu.com/s?wd=' + $(this).val());
        }
        console.log('sss');
        $.ajax({
            url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + $(this).val(),
            type: "get",
            //jsonp只能用get
            async: true,
            dataType: "jsonp",
            jsonp:'cb',
            //在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器

            jsonpCallback:"callback",
            //"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback"
            //为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名

            success: function(data){
                var arr = data.s;
                var html = '';
                $.each(arr,function(k,v){
                    html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ v+"' target='_blank' style='display:block'>" + v+ "</a></li>"
                })
                $('.list').html(html);
            }
        });
    }else{
         $('.list').html('');
    }


});
$(document).click(function(){
     $('.list').html('');
})
</script>