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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
关于PHP开发的9条建议
2015/07/27 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技