首頁 > 開發者 > JavaScript

jQuery Jsonp跨域類比搜尋引擎，jqueryjsonp

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery Jsonp跨域類比搜尋引擎，jqueryjsonp

效果還不錯 就差加上鍵盤控制了...

代碼如下：

<!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('form')[0];       var x = fm.offsetWidth;       var y = fm.offsetHeight;       fm.style.marginLeft = -x / 2 + 'px';       fm.style.marginTop = -y / 2 + 'px';       //擷取操作元素       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 = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=walk&_=' + Math.random();         newscript.type = 'text/javascript';         document.body.appendChild(newscript);       }       //設定回呼函數       function walk(walkJson) {         if(txt.value == 0) {           oul.style.display = 'none';         } else {           oul.style.display = 'block';           oul.innerHTML = '';           if(walkJson.s.length <= 10) {             for(var i = 0; i < walkJson.s.length; i++) {               var oli = document.createElement('li');               oli.style.height = 25 + 'px';               oli.style.width = 100 + '%';               oli.style.lineHeight = 25 + 'px';               oli.style.textIndent = 9 + 'px';               oli.style.listStyle = 'none';               oli.innerHTML = walkJson.s[i];               oul.appendChild(oli);             }           } else {             for(var i = 0; i < 10; i++) {               var oli = document.createElement('li');               oli.style.height = 25 + 'px';               oli.style.width = 100 + '%';               oli.style.lineHeight = 25 + 'px';               oli.style.textIndent = 9 + 'px';               oli.style.listStyle = 'none';               oli.innerHTML = walkJson.s[i];               oul.appendChild(oli);             }           }         }       }     </script>   </body> </html>

以上所述是小編給大家介紹的jQuery Jsonp跨域類比搜尋引擎的執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More