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 17 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery实现广告上下滚动效果
Mar 04 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下删除字符串中HTML标签的函数
2008/08/27 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP精确计算功能示例
2016/11/29 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
django项目搭建与Session使用详解
2018/10/10 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python unittest框架操作实例解析
2020/04/13 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
extern是什么意思
2016/03/10 面试题
建筑工程自我鉴定
2013/10/18 职场文书
亲属关系公证书
2014/04/08 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
六年级作文之预言作文
2019/10/25 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android