suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die domänenübergreifende Simulation einer jQuery-Jsonp-Suchmaschine

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

小云云
小云云Original
2018-01-06 13:18:131430Durchsuche

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>

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!

Python php jquery 搜索引擎
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：Gemeinsame Nutzung der Implementierungsmethode des dynamischen Paging im Front- und Backend von jquery DataTableNächster Artikel：Gemeinsame Nutzung der Implementierungsmethode des dynamischen Paging im Front- und Backend von jquery DataTable

In Verbindung stehende Artikel

Mehr sehen