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

2019-11-19 11:36:34

字体：大中小

来源：转载

供稿：网友

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：微信小程序获取用户信息并保存登录状态详解

下一篇：微信小程序用户授权，以及判断登录是否过期的方法