脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery实现模糊搜索功能的方法分析

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

 更新时间：2018年06月29日 12:01:28   作者：脚脚0108  
这篇文章主要介绍了jQuery实现模糊搜索功能的方法,结合实例形式总结分析了jQuery关键字搜索、模糊查询、动态删除table数据等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • 使用JQuery和CSS模拟超链接的用户单击事件的实现代码

    使用JQuery和CSS模拟超链接的用户单击事件的实现代码

    使用JQuery和CSS模拟超链接的用户单击事件的实现代码，需要的朋友可以参考下
    2012-05-05
  • 运用jQuery定时器的原理实现banner图片切换

    运用jQuery定时器的原理实现banner图片切换

    banner图片切换效果，在一些企业网站上经常会碰到，本文运用jQuery定时器的原理实现banner图片切换，感兴趣的朋友可以学习下
    2014-10-10
  • jquery实现户籍地选择下拉框

    jquery实现户籍地选择下拉框

    这篇文章主要为大家详细介绍了jquery实现户籍地选择下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • jQuery实现的网格线绘制方法

    jQuery实现的网格线绘制方法

    这篇文章主要介绍了jQuery实现的网格线绘制方法,涉及jQuery针对页面元素的获取及样式动态操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery 浮动广告实现代码

    jQuery 浮动广告实现代码

    用jquery实现的浮动广告代码,需要的朋友可以参考下。
    2008-12-12
  • jQuery原生的动画效果

    jQuery原生的动画效果

    这篇文章主要介绍了jQuery原生的动画效果的相关资料,需要的朋友可以参考下
    2015-07-07
  • Jquery中attr与prop的区别详解

    Jquery中attr与prop的区别详解

    在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。下面这篇文章主要给大家介绍了Jquery中attr与prop区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-05-05
  • jQuery中removeData()方法用法实例

    jQuery中removeData()方法用法实例

    这篇文章主要介绍了jQuery中removeData()方法用法,实例形式分析了removeData()方法移除匹配元素指定数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery动态添加删除一行数据示例

    jquery动态添加删除一行数据示例

    这篇文章主要介绍了jquery如何动态添加删除一行数据,需要的朋友可以参考下
    2014-06-06
  • 简单实现jQuery多选框功能

    简单实现jQuery多选框功能

    这篇文章主要为大家详细介绍了如何简单实现jQuery多选框功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论