jsonp实现百度下拉框功能的方法分析

本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下：思路

本文实例讲述了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=" 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>