基于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轻松实现无缝轮播效果
Mar 22 jQuery
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
PHP中GET变量的使用
2006/10/09 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
详解Python字符串对象的实现
2015/12/24 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Python如何调用JS文件中的函数
2019/08/16 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
我爱读书演讲稿
2014/05/07 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2015年入党决心书
2015/02/05 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
音乐教师求职信范文
2015/03/20 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
MySQL分区以及建索引的方法总结
2022/04/13 MySQL