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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
配置eslint规范项目代码风格
Mar 11 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
php下封装较好的数字分页方法
2010/11/23 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php实现的RSS生成类实例
2015/04/23 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
js查找父节点的简单方法
2008/06/28 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
服务生自我鉴定
2014/01/22 职场文书
中学生英语演讲稿
2014/04/26 职场文书
工商管理专业自荐信
2014/06/03 职场文书
学校欢迎标语
2014/06/18 职场文书
团日活动总结报告
2014/06/25 职场文书
法定授权委托证明书
2015/06/18 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python