jQuery Jsonp cross-domain simulation search engine example sharing-JS Tutorial-php.cn

jQuery Jsonp cross-domain simulation search engine example sharing

小云云

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

Original

1343 people have browsed it

This article mainly introduces the relevant information of jQuery Jsonp cross-domain simulation search engine. It is very good and has reference value. Friends in need can refer to it. Hope it helps everyone.

The effect is not bad, just add keyboard control...

The code is as follows:

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

Copy after login

Related recommendations:

Python implementation of a search engine (Pylucene) example tutorial

php Detailed explanation of calling existing search engines

Search engine core technology_php basics

The above is the detailed content of jQuery Jsonp cross-domain simulation search engine example sharing. For more information, please follow other related articles on the PHP Chinese website!