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 动态创建VML的方法
Oct 14 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
javascript的push使用指南
Dec 05 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
PHP 函数学习简单小结
2010/07/08 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
一些不错的js函数ajax
2008/08/20 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
react中Suspense的使用详解
2019/09/01 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python实现树形打印目录结构
2018/03/29 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python从子线程中获得返回值的方法
2019/01/30 Python
超简单使用Python换脸实例
2019/03/27 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
暑期实践思想汇报
2014/01/06 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
诚实守信演讲稿
2014/09/01 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL