基于jQuery使用Ajax动态执行模糊查询功能


Posted in jQuery onJuly 05, 2018

使用Ajax动态执行模糊查询功能

•必须:需要一个执行查询的接口:

说明:

1.搜索模块仅仅使用了boostrap的样式以及Jquery.js文件

2.因为我使用的layui的弹出层里面做的搜索ifram,所以确定和取消按钮的关闭当前页面的功能都是layui的方式,如果不是ifram的窗口仅仅在当前窗口执行的情况下,可以使用下面的语句来进行关闭当前页面的操作:

window.opener=null;
 window.open('','_self');
 window.close();

效果展示:

基于jQuery使用Ajax动态执行模糊查询功能

引用三方功能模块:

<!--jquery-->
 <script src="assets/scripts/jquery.js" type="application/javascript"></script>
 <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="external nofollow" >
 <!--layui-->
 <link rel="stylesheet" href="assets/vendor/layui/css/layui.css" rel="external nofollow" >
 <script type="application/javascript" src="assets/vendor/layui/layui.js"></script>

样式:

<style>
  /*html {
   -ms-overflow-style:none;
   overflow:-moz-scrollbars-none;
  }
  html::-webkit-scrollbar{width:0px}*/
  #select_template_group{
   position: fixed;
   float: left;
   display: none;
  }
  .selected_keywords{
   display: none;
   position: fixed;
   width: 590px;
   max-height: 300px;
   margin-top: 35px;
   z-index: 10002;
  }
  .selected_keywords > ul{
   max-height: 300px;
   min-width: 590px;
   display: inline-block;
   overflow-y: scroll;
   overflow-x: hidden;
  }
  .list-group-item:hover{
   color: #2E2D3C;
   background: #00AAFF;
  }
  #basic-addon1 > img{
   width: 80%;
   height: 80%;
  }
 </style>

HTML代码:

<body>
  <!-- WRAPPER -->
  <div id="wrapper">
   <!-- NAVBAR -->
   <div id="nav"></div>
   <!-- END NAVBAR -->
   <!-- END LEFT SIDEBAR -->
   <!-- MAIN -->
   <div class="main">
    <!-- MAIN CONTENT -->
    <div class="main-content">
     <div class="container-fluid" style="width: 700px;">
      <div class="form-horizontal">
       <!--查询位置-->
       <div class="input-group" id="">
        <span class="input-group-addon" id="sizing-addon2">选择模版</span>
        <input type="text" class="form-control" placeholder="选择模版,支持模糊查询" aria-describedby="sizing-addon2" id="fuzzy_search" oninput="template_choise(this)">
        <!--搜索结果显示-->
        <div class="input-group selected_keywords"></div>
       </div>
       <!--展示位置-->
       <div class="panel panel-primary">
        <div class="panel-heading">
         <h4 class="panel-title">已选择模版</h4>
        </div>
        <div class="panel-body" id="results_2"></div>
       </div>
       <!--功能按钮-->
       <div class="form-group" style="float: left;margin-left: 25%">
        <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default" onclick="tsg_confirm()">确认</button>
        </div>
       </div>
       <div class="form-group" style="float: left;margin-left: 30px">
        <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default" onclick="tsg_cancle()">取消</button>
        </div>
       </div>
      </div>
     </div>
    </div>
    <!-- END MAIN CONTENT -->
   </div>
   <!-- END MAIN -->
  </div>
  <!-- END WRAPPER -->
 </body>
 </html>

Javascript代码:

<script>
   //点击空白区域隐藏搜索结果内容
   $(document).click(function(e){
    var _con = $('.selected_keywords'); // 设置目标区域
    if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
     // todo
     $(".selected_keywords").css("display","none")
    }
   });
   // 搜索选择功能
   function template_choise(obj) {
    // console.log($(obj).val().length)
    // 判断输入框内容为空的时候
    if ($(obj).val().length == 0){
     $(".selected_keywords").css("display","none")
     var selected_keywords = $(".selected_keywords")
     selected_keywords.empty()
    }
    else {
     //获取setinterval的索引
     var index = window.setInterval(function () {
      // 获取输入框中的搜索关键字
      var serach_keywords = $(obj).val()
      var list_template = "<ul class='list-group'></ul>"
      //执行模糊查询功能,延迟200ms
      $.ajax({
       type: "POST",
       url: "/admin/tsg_fuzzy_search",
       data: {
        "keywords": serach_keywords
       },
       dataType: "json",
       success: function (data) {
        $(".selected_keywords").css("display", "block")
        $(".selected_keywords").html(list_template)
        $(".list-group").empty()
        var code = data["code"]
        var data = data["data"]
        //判断是否存在搜索结果
        if(code == "000000") {
         $.each(data, function (i, data) {
          var data_complte = data["template_rule_name"] + "," + data["template_name"] + "," + data["template_desc"]
          var html_style = "<a href='javascript:'><li class='list-group-item' onclick='choise_one_template(this)'>" + data_complte + "</li></a>"
          $(".list-group").append(html_style)
         })
        }
        else if(code == "200000"){
         $(".list-group").append("<li class='list-group-item'>没有找到合适的结果</li>")
        }
        //清除当前interval
        window.clearInterval(index)
       },
       fail: function () {
        alert("查询失败")
       }
      })
      // 延时200ms
     }, 200)
    }
   }
   //添加选择的模版到展示栏
   function choise_one_template(obj) {
    //获取选择的值
    var template_data = $(obj).text()
    //拆分获取的数据
    var selected_template = template_data.split(",")
    //获取指定的数据
    selected_template = selected_template[1]
    // console.log(selected_template)
    //制作html
    var selected_template_html = "<button type='button' class='btn btn-default template_data' aria-label='Left Align'><span class='glyphicon glyphicon-remove' aria-hidden='true' onclick='delete_template(this)'></span> "+selected_template+"</button>"
    //在指定div内插入html
    $("#results_2").append(selected_template_html)
   }
   //删除当前已选择的template
   function delete_template(obj) {
    //获取选择的值数据
    var template_data_selected = $(obj).text()
    console.log(template_data_selected)
    //获取当前删除的html内容
    var father_button_html = $(obj).closest("button")
    //从指定容器中删除该内容
    father_button_html.remove()
   }
   //关闭当前ifram
   function tsg_cancle(){
    layui.use('layer', function() {
     var layer = layui.layer
     layer.confirm('您确定要关闭本页吗?', {icon: 3, title: '您确定要关闭本页吗?'}, function (index) {
      //清除已选择的模版信息
      // localStorage.removeItem("selected_template_data")
      //清除已排序的模板信息
      localStorage.removeItem("template_data_sorted")
      var layer = layui.layer;
      var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
      parent.layer.close(index); //再执行关闭
      layer.close(index);
     })
    })
   }
   //确认按钮=提交
   function tsg_confirm() {
    var selected_template_datas = []
    $(".template_data").each(function (i,element) {
     selected_template_datas[i] = $(element).text()
    })
    localStorage.setItem("template_data_sorted",selected_template_datas)
    layui.use('layer', function() {
     var layer = layui.layer
     var layer = layui.layer;
     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
     parent.layer.close(index); //再执行关闭
     layer.close(index);
    })
    //刷新父页面
    parent.location.reload()
   }
   }
   }
  </script>

总结

以上所述是小编给大家介绍的基于jQuery使用Ajax动态执行模糊查询功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现增删改查
Dec 22 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
Python日期操作学习笔记
2008/10/07 Python
python Django批量导入数据
2016/03/25 Python
深入理解Django的中间件middleware
2018/03/14 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
试用期自我鉴定范文
2014/03/20 职场文书
爱心活动计划书
2014/04/26 职场文书
golang生成并解析JSON
2022/04/14 Golang