首頁 > 開發者 > JavaScript

js類比百度模糊搜尋的執行個體，js模糊搜尋執行個體

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

js類比百度模糊搜尋的執行個體，js模糊搜尋執行個體

廢話不多說，直接上代碼

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      margin:0;      padding:0;    }    input{      display:block;      list-style:none;    }    html,body{      color:#000;      font-size:14px;      font-family:'微軟雅黑';    }    .box{      margin:50px auto;      width:300px;    }    .box input{      padding:0 10px;      width:278px;      height:30px;      border:1px solid green;    }    .box ul{      display:none;      border:1px solid green;      border-top:none;    }    .box ul li{      list-style:none;      padding:0 10px;      height:30px;      line-height:30px;      cursor:pointer;    }    .box ul li:hover{      background:#eee;    }  </style></head><body>  <div class='box'>    <input type="text" id='searchInp'/>    <ul id='searchBox'>      <li>1111</li>      <li>2222</li>      <li>3333</li>      <li>4444</li>    </ul>  </div>  <script src='jquery.min.js'></script>  <script>    var searchModule = (function(){      var $searchInp = $('#searchInp'),        $searchBox = $('#searchBox');      //向百度的伺服器發送JSONP請求，把資料繫結到容器當中      function bindHTML(){        var searchKey = $searchInp.val();        function callback(data){          data = data['g'];          var str = '';          $.each(data,function(index,item){            if(index<=3){              str += '<li>'+item+'</li>'            }          })          $searchBox.html(str).stop().slideDown(300);        }        $.ajax({          url:"https://sp0.baidu.com/5a1Fazu8AA54nxGKo9WTAnF6hhy/su?wd="+searchKey,          dataType:"jsonp",          jsonp:'cb',          success:callback        })      }      //事件綁定和模組的入口      function init(){        //文字框擷取焦點或者輸入內容，判斷當前文字框中是否有內容，有內容綁定資料，沒有內容隱藏展示框        $searchInp.on("focus keyup",function(){          var val = $(this).val();          if(val.length>0){            bindHTML();            return;          }          $searchBox.stop().slideUp(300);        }).on('blur',function(){          window.setTimeout(function(){            $searchBox.stop().slideUp(300);          },3000)        })        //給展示框中的liBinder 方法        $searchBox.on('click',function(e){          var tar = e.target,            tarTag = tar.tagName.toUpperCase(),            $tar = $(tar);          if(tarTag==="LI"){            $searchInp.val($tar.html());            $(this).stop().slideUp(300);          }        })      }      return {        init:init      }    })()    searchModule.init();  </script></body></html>

以上這篇js類比百度模糊搜尋的執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 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