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 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
微信小程序用户授权,以及判断登录是否过期的方法
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
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
利用python发送和接收邮件
2016/09/27 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
建筑系毕业生自我鉴定
2014/01/24 职场文书
食品业务员岗位职责
2014/03/18 职场文书
食品采购员岗位职责
2014/04/14 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
优秀团员事迹材料
2014/12/25 职场文书
研讨会致辞
2015/07/31 职场文书
标准发言稿结尾
2019/07/18 职场文书