JS에서 Baidu 검색 인터페이스를 구현하는 방법-JS 튜토리얼-php.cn

JS에서 Baidu 검색 인터페이스를 구현하는 방법

亚连

풀어 주다： 2018-06-08 11:02:22

원래의

2837명이 탐색했습니다.

이 글에서는 Baidu 검색 인터페이스와 링크 기능을 구현하기 위한 JS의 예제 코드를 주로 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

이 글에서는 JS에서 Baidu 검색 인터페이스와 링크 기능을 구현하는 방법을 구체적으로 소개합니다. 코드는 다음과 같습니다.

지난 기사에서는 Baidu 검색 기능을 구현하기 위해 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>

로그인 후 복사

위 내용은 제가 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.