JS百度搜索接口及链接功能的实现代码-js教程-PHP中文网

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

小云云

发布： 2018-02-05 10:07:28

原创

2266人浏览过

本文主要和大家介绍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"> 
      <p id="wei"> 
        <input type="text" id="text"> 
        <ul id="list"></ul> 
      </p> 
    <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>

登录后复制

相关推荐：

ES6中Promise代码实例分析

LOVESTUdio多校园网络店铺

主要更新介绍：完美整合Discuz!论坛，实现一站式登陆、退出、注册；同步所有会员资料；新增购物车功能，商品购买更加方便、快捷；新增部分快捷菜单，网站访问更加方便；限制首页商品、店铺标题显示长度；修正会员后台管理不能更改密码的错误；完善商品显示页面所有功能链接；修正后台标签管理部分错误；修正前台学校列表不按后台顺序显示的错误；修正搜索功能中学校名称过长导致显示紊乱的现象；修正