平武建站

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

本文实例讲述了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 + "" + stus[i].id + ""
          str = str + "" + stus[i].studentNo + ""
          str = str + "" + stus[i].studentName + ""
          str = str + "" + stus[i].studentClass + ""
          str = str + "" + "" + "删除" + "" + ""
        }
        $("#tbody").html(str);
      }
    }
    );
  }
});

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

总结：

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

str = str + "" + "" + "删除" + "" + ""


$(".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 + "" + stus[i].id + ""
          str = str + "" + stus[i].studentNo + ""
          str = str + "" + stus[i].studentName + ""
          str = str + "" + stus[i].studentClass + ""
          str = str + "" + "" + "删除" + "" + ""
        }
        $("#tbody").html(str);
      }
    }
    );
  }
});

功能三：删除 table中的数据

总结：

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

删除
删除


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实现模糊搜索功能的方法分析
本文URL：http://pwwzsj.com/article/iidjeh.html

其他资讯