Beispiel für die domänenübergreifende Simulation einer jQuery-Jsonp-Suchmaschine-js-Tutorial-php.cn

Beispiel für die domänenübergreifende Simulation einer jQuery-Jsonp-Suchmaschine

小云云

Freigeben： 2018-01-06 13:18:13

Original

1428 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die relevanten Informationen der domänenübergreifenden Simulationssuchmaschine jQuery vor. Er ist sehr gut und hat Referenzwert. Ich hoffe, es hilft allen.

Der Effekt ist nicht schlecht, außer dass die Tastatursteuerung hinzugefügt wird...

Der Code lautet wie folgt:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8" /> 
    <title>迷糊网罗</title> 
    <style type="text/css"> 
      * { 
        margin: 0; 
        padding: 0; 
      } 
      form { 
        position: absolute; 
        left: 50%; 
        top: 40%; 
      } 
      form input:nth-child(1) { 
        width: 450px; 
        height: 34px; 
        float: left; 
        font-size: 16px; 
        text-indent: 0.5em; 
        outline: none; 
        box-sizing: border-box; 
      } 
      form input:nth-child(1):focus { 
        border: 1px solid blueviolet; 
      } 
      form input:nth-child(2) { 
        height: 34px; 
        float: left; 
        background: blueviolet; 
        cursor: pointer; 
        width: 80px; 
        letter-spacing: 2px; 
        border: 0; 
        font-size: 14px; 
        line-height: 34px; 
      } 
      #oul { 
        position: absolute; 
        left: 0; 
        top: 34px; 
        background: white; 
        width: 530px; 
        box-shadow: 3px 3px 5px #F3F3F3; 
        border: 1px solid #F3F3F3; 
        box-sizing: border-box; 
        display: none; 
      } 
      #oul li:hover { 
        background: #F3F3F3; 
        cursor: pointer; 
      } 
    </style> 
  </head> 
  <body> 
    <form action="" method="" name="ss"> 
      <input type="" name="ss" id="txt" value="" /> 
      <input type="button" name="ss" id="btn" value="迷糊网罗" /> 
      <ul id="oul"> 
      </ul> 
    </form> 
    <script type="text/javascript"> 
      //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=&_=1497256697565 
      //位置调整 习惯就好.. 
      var fm = document.getElementsByTagName(&#39;form&#39;)[0]; 
      var x = fm.offsetWidth; 
      var y = fm.offsetHeight; 
      fm.style.marginLeft = -x / 2 + &#39;px&#39;; 
      fm.style.marginTop = -y / 2 + &#39;px&#39;; 
      //获取操作元素 
      var txt = document.getElementById("txt"); 
      var oul = document.getElementById("oul"); 
      //动态创建js脚本 
      txt.onkeyup = function(ev) { 
        var value = this.value; 
        var newscript = document.createElement("script"); 
        newscript.src = &#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&#39; + value + &#39;&cb=walk&_=&#39; + Math.random(); 
        newscript.type = &#39;text/javascript&#39;; 
        document.body.appendChild(newscript); 
      } 
      //设置回调函数 
      function walk(walkJson) { 
        if(txt.value == 0) { 
          oul.style.display = &#39;none&#39;; 
        } else { 
          oul.style.display = &#39;block&#39;; 
          oul.innerHTML = &#39;&#39;; 
          if(walkJson.s.length <= 10) { 
            for(var i = 0; i < walkJson.s.length; i++) { 
              var oli = document.createElement(&#39;li&#39;); 
              oli.style.height = 25 + &#39;px&#39;; 
              oli.style.width = 100 + &#39;%&#39;; 
              oli.style.lineHeight = 25 + &#39;px&#39;; 
              oli.style.textIndent = 9 + &#39;px&#39;; 
              oli.style.listStyle = &#39;none&#39;; 
              oli.innerHTML = walkJson.s[i]; 
              oul.appendChild(oli); 
            } 
          } else { 
            for(var i = 0; i < 10; i++) { 
              var oli = document.createElement(&#39;li&#39;); 
              oli.style.height = 25 + &#39;px&#39;; 
              oli.style.width = 100 + &#39;%&#39;; 
              oli.style.lineHeight = 25 + &#39;px&#39;; 
              oli.style.textIndent = 9 + &#39;px&#39;; 
              oli.style.listStyle = &#39;none&#39;; 
              oli.innerHTML = walkJson.s[i]; 
              oul.appendChild(oli); 
            } 
          } 
        } 
      } 
    </script> 
  </body> 
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Python-Implementierung einer Suchmaschine (Pylucene) Beispiel-Tutorial

Detaillierte Erklärung von PHP-Aufrufen an vorhandene Suchmaschinen

Suchmaschinen-Kerntechnologie_php-Grundlagen

Das obige ist der detaillierte Inhalt vonBeispiel für die domänenübergreifende Simulation einer jQuery-Jsonp-Suchmaschine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!