这篇文章将为大家详细讲解有关使用jsonp怎么实现一个百度下拉框功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联自2013年起,先为马边彝族等服务建站,马边彝族等地企业,进行企业商务咨询服务。为马边彝族企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
思路就是获取用户输入,然后根据用户输入调用百度的一个接口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, length2 = data.s.length; i < length2; 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); });
关于使用jsonp怎么实现一个百度下拉框功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。