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=" rel="external nofollow" +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>