欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

在JS中如何实现百度搜索接口

程序员文章站 2022-05-23 14:10:08
...
这篇文章主要介绍了JS实现百度搜索接口及链接功能实例代码,需要的朋友可以参考下

本文通过代码给大家介绍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>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Koa2中有关async&await的用法有哪些?

在zTree树插件中如何实现全国五级地区点击后加载

如何实现node+express个性化聊天室?

以上就是在JS中如何实现百度搜索接口的详细内容,更多请关注其它相关文章!