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


Posted in Javascript onAugust 04, 2017

废话不多说,直接上代码

<!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模拟百度模糊搜索的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 #Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 #Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
Angular2环境搭建具体操作步骤(推荐)
Aug 04 #Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 #Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 #Javascript
vue 2.0封装model组件的方法
Aug 03 #Javascript
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
javascript object array方法使用详解
2012/12/03 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL