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

2023-09-10 23:12:05 76

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

功能一：关键字搜索

总结：

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

$("#tbody").empty;

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

varstus=eval("("+msg+")");

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

$("#tbody").html(str);

$("#btn").click(function(){
varid=$.trim($("#id").val());
varclassname=$.trim($("#classname").val());
varclazz=$.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("");
}
varstus=eval("("+msg+")");
$("#tbody").empty;
varstr="";
for(vari=0;i"+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){
varid=$.trim($("#id").val());
varclassname=$.trim($("#classname").val());
varclazz=$.trim($("#class").val());
if(id==""&&classname==""&&clazz==""){
$.ajax({
type:"post",
url:"SearchServlet",
data:{
"type":"all",
},
success:function(msg){
varstus=eval("("+msg+")");
$("#tbody").empty;
varstr="";
for(vari=0;i"+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标签里面的两种方式

删除
删除

functiona(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实现模糊搜索功能的方法分析

热门推荐

随机推荐