suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Baidu-Suchschnittstelle in JS

So implementieren Sie die Baidu-Suchschnittstelle in JS

亚连
亚连Original
2018-06-08 11:02:222827Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So lösen Sie das Problem mit der Fehlausrichtung der niceScroll-Bildlaufleiste in jQueryNächster Artikel：So lösen Sie das Problem mit der Fehlausrichtung der niceScroll-Bildlaufleiste in jQuery

In Verbindung stehende Artikel

Mehr sehen