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 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php析构函数的简单使用说明
2015/08/24 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
高一自我鉴定
2013/12/17 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL