jQuery实现模糊搜索功能的方法分析


Posted in jQuery onJune 29, 2018

本文实例讲述了jQuery实现模糊搜索功能的方法。分享给大家供大家参考,具体如下:

功能一:关键字搜索

总结:

1、搜索出的结果,前台先要清空原有表格

$("#tbody").empty;

2、后台返回的json格式字符串 js eval 专成对象

var stus = eval("(" + msg + ")");

在循环进行字符串拼接到表格上

$("#tbody").html(str);
$("#btn").click(function() {
  var id = $.trim($("#id").val());
  var classname = $.trim($("#classname").val());
  var clazz = $.trim($("#class").val());
  if (id == "" & classname == "" & clazz == "") {
    alert("请至少输入一个筛选条件");
  } else {
    $.ajax({
      type : "post",
      url : "SearchServlet",
      data : {
        "type" : "find",
        "id" : id,
        "classname" : classname,
        "class" : clazz
      },
      success : function(msg) {
        if ("无结果" == msg) {
          alert(msg);
          $("#id").val("");
          $("#classname").val("");
          $("#class").val("");
        }
        var stus = eval("(" + msg + ")");
        $("#tbody").empty;
        var str = "";
        for (var i = 0; i < stus.length; i++) {
          str = str + "<tr><td>" + stus[i].id + "</td>"
          str = str + "<td>" + stus[i].studentNo + "</td>"
          str = str + "<td>" + stus[i].studentName + "</td>"
          str = str + "<td>" + stus[i].studentClass + "</td>"
          str = str + "<td>" + "<a href='javascript:a(" + stus[i].id + ")'>" + "删除" + "</a>" + "</td></tr>"
        }
        $("#tbody").html(str);
      }
    }
    );
  }
});

功能二:input框删除关键字,动态显示所有结果

总结:

1、a标签动态传参,传给后台进行删除,使用字符串拼接

str = str + "<td>" + "<a href='javascript:a(" + stus[i].id + ")'>" + "删除" + "</a>" + "</td></tr>"
$(".input").on('input', function(e) {
  var id = $.trim($("#id").val());
  var classname = $.trim($("#classname").val());
  var clazz = $.trim($("#class").val());
  if (id == "" && classname == "" && clazz == "") {
    $.ajax({
      type : "post",
      url : "SearchServlet",
      data : {
        "type" : "all",
      },
      success : function(msg) {
        var stus = eval("(" + msg + ")");
        $("#tbody").empty;
        var str = "";
        for (var i = 0; i < stus.length; i++) {
          str = str + "<tr><td>" + stus[i].id + "</td>"
          str = str + "<td>" + stus[i].studentNo + "</td>"
          str = str + "<td>" + stus[i].studentName + "</td>"
          str = str + "<td>" + stus[i].studentClass + "</td>"
          str = str + "<td>" + "<a href='javascript:a(" + stus[i].id + ")'>" + "删除" + "</a>" + "</td></tr>"
        }
        $("#tbody").html(str);
      }
    }
    );
  }
});

功能三:删除 table中的数据

总结:

在a标签里面传参 js写在a标签里面的两种方式

<td><ahref="javascript:a(${stu.id})" rel="external nofollow" >删除</a></td>
<td><a href="javascript:void(0);" rel="external nofollow" onclick="remove(${stu.id })">删除</a></td>
function a(id) {
  $.ajax({
    type : "get",
    url : "SearchServlet?type=delete&id=" + id,
    success : function(msg) {
      alert(msg);
      if ("删除成功" == msg) {
        $("tr").remove("#stu_" + id);
      }
    }
  });
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
Jquery获取radio选中的值
May 05 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
You might like
php的4种常见运行方式
2015/03/20 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
javascript实现日历效果
2019/06/17 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python3实现简单飞机大战
2020/11/29 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
小区门卫工作职责
2013/12/14 职场文书
广告业务员岗位职责
2014/02/06 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
海飞丝广告词
2014/03/20 职场文书
报关报检委托书
2014/04/08 职场文书
中学生英语演讲稿
2014/04/26 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
教师工作总结范文2014
2014/11/10 职场文书
委托书的样本
2015/01/28 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers