jsonp获取百度接口实现百度智能提示搜索框

说明：使用代码前需要自行引入art-template模版引擎。

CSS代码

<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .searchBox {
        box-sizing: border-box;
        width: 600px;
        height: 400px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -200px;
        margin-left: -250px;
    }

        .searchBox .search {
            box-sizing: border-box;
            width: 500px;
            height: 40px;
            line-height: 40px;
            outline-style: none;
            border-radius: 6px 0px 0px 6px;
            border: 2px solid #4569ff;
            padding-left: 10px;
        }

    .searchBtn {
        box-sizing: border-box;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #4569ff;
        position: absolute;
        top: 0px;
        right: 0px;
        color: #fff;
        border-radius: 0px 6px 6px 0px;
        cursor: grab;
    }

    .searchBox .oninput {
        box-sizing: border-box;
        width: 500px;
        height: 40px;
        line-height: 40px;
        outline-style: none;
        border-radius: 6px 0px 0px 0px;
        border: 2px solid #4569ff;
        border-bottom: 0px;
        padding-left: 10px;
    }

    .searchBox .tips {
        display: none;
    }

    .searchBox .tipsShow {
        display: block;
        box-sizing: border-box;
        width: 500px;
        border-left: 2px solid #4569ff;
        border-right: 2px solid #4569ff;
        border-bottom: 2px solid #4569ff;
        border-radius: 0px 0px 6px 6px;
        margin-top: -5px;
        padding: 10px 0px;
    }

    .tipsShow::after {
        content: '';
        display: block;
        position: absolute;
        top: 40px;
        left: 10px;
        width: 480px;
        height: 1px;
        background: #ccc;
    }

    ul li {
        list-style: none;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
        padding-left: 10px;
    }

        ul li a {
            text-decoration: none;
            color: #000;
        }
</style>

HTML代码

<div class="searchBox">
    <input type="text" id="search" class="search">
    <div id="searchBtn" class="searchBtn">百度一下</div>
    <ul id="tips" class="tips"></ul>
</div>

JS代码

<script src="template-web.js"></script>
<script type='text/html' id="tpl">
    {{each resault}}
    <li><a href=https://www.baidu.com/s?wd ={{$value.q}}>{{$value.q}}</a></li>
    {{/each}}
</script>
<script>
    var search = document.getElementById('search');
    var ullist = document.getElementById('tips');
    var searchBtn = document.getElementById('searchBtn');
    console.log(searchBtn);
    searchBtn.onclick = () => {
        window.location = 'https://www.baidu.com/s?wd=' + search.value
    }

    function jsonp(options) {
        var funName = options.reqStr.funnameStr + (+new Date());
        window[funName] = options.successs;
        var params = '';
        for (const arr in options.data) {
            params += '&' + arr + '=' + options.data[arr]
        }
        var getUrl = options.url + params + '&' + options.reqStr.callbackname + '=' + funName;
        var script = document.createElement('script');
        script.src = getUrl;
        document.body.appendChild(script);
        script.onload = () => {
            document.body.removeChild(script);
        }
    }
    search.addEventListener('input', () => {
        var searchValue = search.value;
        if (searchValue.trim() == '') {
            search.className = 'search';
            ullist.className = 'tips'
            return
        } else {
            jsonp({
                url: 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35262,35105,35049,34584,34505,34532,35246,34606,26350,35147' +
                    searchValue,
                reqStr: {
                    callbackname: 'cb',
                    funnameStr: 'jQuery',
                },
                data: {
                    wd: searchValue,
                },
                successs: (data) => {
                    var html = template('tpl', {
                        resault: data.g
                    });
                    ullist.innerHTML = html;
                    ullist.className = 'tipsShow';
                    search.className = 'oninput';
                }
            });
        }

    })
</script>

template-web.js下载