jsonp实现百度下拉框功能的方法分析
本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下：
思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容
varobj=document.querySelector('#user-input');
varbody=document.querySelectorAll('body')[0];
varul=document.querySelector('#ul');
varinner='';
functionrender(data){
//删除前一次请求的li的内容
if(ul.innerHTML!=''){
ul.innerHTML='';
}
for(leti=0,length1=data.s.length;i
*{
margin:0;
padding:0;
}
ul{
margin-left:10px;
transition:all1sease;
}
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:all1sease;
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{/*MozillaFirefox19+*/
color:white;
}
input:-moz-placeholder{/*MozillaFirefox4to18*/
color:white;
}
input:-ms-input-placeholder{/*InternetExplorer10-11*/
color:white;
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。