欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js模拟百度模糊搜索的实例

程序员文章站 2022-11-25 11:02:17
废话不多说,直接上代码

废话不多说,直接上代码

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

        //给展示框中的li绑定方法
        $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模拟百度模糊搜索的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。