jQuery Jsonp partage d'exemples de moteur de recherche de simulation inter-domaines-js tutoriel-php.cn

jQuery Jsonp partage d'exemples de moteur de recherche de simulation inter-domaines

小云云

Libérer： 2018-01-06 13:18:13

original

1402 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes du moteur de recherche de simulation inter-domaines jQuery Jsonp. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela aide tout le monde.

L'effet n'est pas mauvais sauf l'ajout du contrôle du clavier...

Le code est le suivant :

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

Copier après la connexion

Recommandations associées :

Tutoriel d'exemple d'implémentation Python d'un moteur de recherche (Pylucene)

Explication détaillée des appels php vers des applications existantes moteurs de recherche

Bases de la technologie de base des moteurs de recherche_php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!