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 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
javascript的BOM汇总
Jul 16 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 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/07/13 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
谈谈JS中的!!
2017/12/07 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
销售文员岗位职责
2013/11/29 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
服装厂厂长职责
2013/12/16 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
法人授权委托书
2014/09/16 职场文书
高效课堂教学反思
2016/02/24 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android