js实现百度搜索框提示（跨域）

效果图如下：

html部分：

<input type="text" id="inp"><button>搜索</button>
    <ul id="oul"></ul>

css部分：

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    input {
        width: 300px;
        height: 40px;
        margin-left: 550px;
        margin-top: 100px;
    }

    button {
        width: 100px;
        height: 45px;
    }

    ul {
        margin-left: 550px;
        width: 300px;
        box-shadow: 0px 0px 5px #ccc;
        list-style: none;
        border: 1px solid #ccc;
        border-top: 0px;
        padding: 5px;
    }
</style>

js部分：

<script>

    //url为百度接口，wd后面拼上要搜索的内容。
    var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';
    var oul = document.getElementById('oul');
    var inp = document.getElementById('inp');
    
    //oninput事件，input内value发生改变时触发，事件触发的第一步是先清除上一个script。
    inp.oninput = function () {
        var ourl = url + inp.value + '&cb=fn';
        del();
    //input内无值时，页面无内容。有值的时候发送请求。
        if (this.value != '') {
            var jsonp = document.createElement('script');
            jsonp.src = ourl;
            document.body.appendChild(jsonp);
        } else {
            oul.innerHTML = ' ';
        }
    }

    function fn(data) {
    //接收的数据显示之前清除上一次显示的内容。
        oul.innerHTML = ' ';
        for (var i = 0; i < data.s.length; i++) {
            var oli = document.createElement('li');
            oli.innerHTML = data.s[i];
            //为每一项添加点击事件，点击时将点击的内容显示到input中。
            oli.onclick = function () {
                inp.value = this.innerHTML;
            }
            oul.appendChild(oli);
        }
    };

    function del() {
        var scr = document.querySelectorAll('script');
        if (scr.length === 0) {
            return;
        }
        document.body.removeChild(scr[scr.length - 1]);
    }
</script>