jsonp实现一个百度下拉框

思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容

var obj=document.querySelector('#user-input');
    var body=document.querySelectorAll('body')[0];
    var ul=document.querySelector('#ul');
    var inner='';
    function render(data){
        //删除前一次请求的li的内容
        if(ul.innerHTML!=''){
            ul.innerHTML='';
        }
        for(let i = 0, length1 = data.s.length; i < length1; i++){
            var li=document.createElement('li');
            li.innerHTML=data.s[i];
            ul.appendChild(li);
        }

    }
    obj.addEventListener('keyup',function(){
        if(document.querySelector('#request')){
            body.removeChild(document.querySelector('#request'));
        }   
            var script=document.createElement('script');
            script.id="request";
            script.src="http://unionsug.baidu.com/su?wd="+encodeURI(obj.value.trim())+'&p=3&cb=render';
            body.appendChild(script);
    });
    //利用冒泡添加事件。
    ul.addEventListener('click',function(e){
        var e=e||window.event;
        window.location.href="https://www.baidu.com/s?word="+encodeURI(e.target.innerHTML);
    });

<style type="text/css">
    *{
                    margin: 0;
                    padding: 0;
    }
    ul{
                    margin-left: 10px;
                    transition: all 1s ease;
    }
        input{
                    width: 300px;
                    height: 40px;
                    line-height: 40px;
                    background: #4caf50a6;
                    outline: none;
                    border: none;
                    border-radius: 10px;
                    padding-left: 15px;
                    color: white;
                    font-size: 20px;
        }
        li{
                    cursor: pointer;
                    transition: all 1s ease;
                    list-style: none;
                    width: 280px;
                    height: 30px;
                    line-height: 30px;
                    background: #8acb8da8;
                    color: #888e4a;
                    padding-left: 10px;
        }
        li:hover{
                    background: #64a968;
                    color: #caf1cc;
        }
        input::-webkit-input-placeholder{
            color:white;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:white;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:white;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:white;
        }
    </style>