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

집

웹 프론트엔드

JS 튜토리얼

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

Jun 08, 2018 am 11:02 AM

js 바이두 검색

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

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

지난 기사에서는 Baidu 검색 기능을 구현하기 위해 JS를 소개했습니다

&lt;!DOCTYPE html&gt; 
&lt;html ng-app=&quot;myApp&quot;&gt; 
  &lt;head&gt; 
    &lt;meta charset=&quot;UTF-8&quot;&gt; 
    &lt;title&gt;anchor&lt;/title&gt; 
    &lt;style&gt; 
      *{ 
        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; 
      } 
    &lt;/style&gt; 
  &lt;/head&gt; 
  &lt;body ng-controller=&quot;show&quot;&gt; 
      &lt;p id=&quot;wei&quot;&gt; 
        &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; 
        &lt;ul id=&quot;list&quot;&gt;&lt;/ul&gt; 
      &lt;/p&gt; 
    &lt;script type=&quot;text/javascript&quot;&gt; 
      var txt = document.getElementById(&quot;text&quot;); 
      var oUl = document.getElementById(&quot;list&quot;); 
      txt.onkeyup = function(){ 
        var val = txt.value; 
        var oScript = document.createElement(&quot;script&quot;);//动态创建script标签 
        oScript.src = &quot;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&quot;+val+&quot;&amp;cb=callback&quot;; 
        //添加链接及回调函数 
        document.body.appendChild(oScript);//添加script标签 
        document.body.removeChild(oScript);//删除script标签 
      } 
      //回调函数 
      function callback(data){ 
        var str=&quot;&quot;; 
        for(var i=0;i&lt;data.s.length;i++){ 
          str += &quot;&lt;li&gt;&lt;a href=\&quot;https://www.baidu.com/s?wd=&quot;+data.s[i]+&quot;\&quot;&gt;&quot;+data.s[i]+&quot;&lt;/a&gt;&lt;/li&gt;&quot;; 
        } 
        //console.log(str); 
        oUl.innerHTML=str; 
        oUl.style.display=&quot;block&quot;; 
      } 
    &lt;/script&gt;  
  &lt;/body&gt; 
&lt;/html&gt;