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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
ES6的解构赋值实例详解
May 06 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
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
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
javascript版2048小游戏
2015/03/18 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
js实现div色块碰撞
2020/01/16 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
详解Python中的多线程编程
2015/04/09 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
解决Python二维数组赋值问题
2019/11/28 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python如何保存文本文件
2020/06/07 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
数据保密承诺书
2014/06/03 职场文书
信用卡工资证明格式
2014/09/13 职场文书
小学少先队活动总结
2015/05/08 职场文书
基层党建工作简报
2015/07/21 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技