JS实现百度搜索接口及链接功能实例代码


Posted in Javascript onFebruary 02, 2018

本文通过代码给大家介绍js实现百度搜索接口及链接功能,具体代码如下所示:

在上篇文章给大家介绍了JS 实现百度搜索功能 

<!DOCTYPE html> 
<html ng-app="myApp"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>anchor</title> 
    <style> 
      *{ 
        margin:0; 
        padding:0; 
      } 
      #wei{ 
        width:500px; 
        height:600px; 
        margin:0 auto; 
        border:0px solid gray; 
      } 
      #wei input{ 
          width:476px; 
          height:50px; 
          line-height: 50px; 
          padding-left:20px; 
          font-size: 16px; 
      } 
      #wei ul{ 
        height:auto; 
        border:1px solid #ccc; 
        display: none; 
      } 
      #wei ul li{ 
          width:100%; 
          height:30px; 
          line-height: 30px; 
          text-indent:10px; 
          font-size: 16px; 
          list-style: none; 
      } 
      #wei ul li a{ 
          text-decoration:none; 
      } 
      #wei ul li:hover{ 
        display:block; 
        background:#ccc; 
        color:#fff; 
      } 
    </style> 
  </head> 
  <body ng-controller="show"> 
      <div id="wei"> 
        <input type="text" id="text"> 
        <ul id="list"></ul> 
      </div> 
    <script type="text/javascript"> 
      var txt = document.getElementById("text"); 
      var oUl = document.getElementById("list"); 
      txt.onkeyup = function(){ 
        var val = txt.value; 
        var oScript = document.createElement("script");//动态创建script标签 
        oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback"; 
        //添加链接及回调函数 
        document.body.appendChild(oScript);//添加script标签 
        document.body.removeChild(oScript);//删除script标签 
      } 
      //回调函数 
      function callback(data){ 
        var str=""; 
        for(var i=0;i<data.s.length;i++){ 
          str += "<li><a href=\"https://www.baidu.com/s?wd="+data.s[i]+"\">"+data.s[i]+"</a></li>"; 
        } 
        //console.log(str); 
        oUl.innerHTML=str; 
        oUl.style.display="block"; 
      } 
    </script>  
  </body> 
</html>

总结

以上所述是小编给大家介绍的JS实现百度搜索接口及链接功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
深入理解angularjs过滤器
May 25 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
jstree的简单实例
Dec 01 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
原生JS实现的双色球功能示例
Feb 02 #Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 #Javascript
微信小程序数字滚动插件使用详解
Feb 02 #Javascript
JS中的BOM应用
Feb 02 #Javascript
微信小程序实现文字跑马灯效果
May 26 #Javascript
微信小程序实现滚动消息通知
Feb 02 #Javascript
You might like
php实现的农历算法实例
2015/08/11 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
详解JS数值Number类型
2018/02/07 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
生日派对邀请函
2014/01/13 职场文书
服务生自我鉴定
2014/01/22 职场文书
铁路个人事迹材料
2014/01/30 职场文书
活动宣传策划方案
2014/05/23 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
专职安全员岗位职责
2015/04/11 职场文书
高中美术教学反思
2016/02/17 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
教你部署vue项目到docker
2022/04/05 Vue.js