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


Posted in Javascript onMay 10, 2019

本文实例讲述了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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 #Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 #Javascript
Angular4.0动画操作实例详解
May 10 #Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 #Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 #Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 #Javascript
Vue项目中配置pug解析支持
May 10 #Javascript
You might like
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
Yii2单元测试用法示例
2016/11/12 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python中super函数用法实例分析
2019/03/18 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
中文专业求职信
2014/06/20 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
vue首次渲染全过程
2021/04/21 Vue.js