So implementieren Sie die Baidu-Suchschnittstelle in JS-js-Tutorial-php.cn

So implementieren Sie die Baidu-Suchschnittstelle in JS

亚连

Freigeben： 2018-06-08 11:02:22

Original

2811 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von JS zur Implementierung der Baidu-Suchoberfläche und der Linkfunktion vorgestellt. Freunde, die ihn benötigen, können darauf verweisen.

In diesem Artikel wird JS zur Implementierung der Baidu-Suchoberfläche und der Linkfunktion durch Code vorgestellt. Der spezifische Code lautet wie folgt:

Im letzten Artikel habe ich Ihnen JS zur Implementierung der Baidu-Suchfunktion vorgestellt

<!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>

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt, ich hoffe, dass es so sein wird hilfreich für Sie in der Zukunft.

Verwandte Artikel:

Was sind die Verwendungszwecke von async&await in Koa2?

So implementieren Sie das Klickladen von fünfstufigen Regionen im ganzen Land im zTree-Baum-Plug-in

So implementieren Sie Node+ Express personalisierter Chatroom?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Baidu-Suchschnittstelle in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!