jQuery实现模糊搜索功能的方法分析
本文实例讲述了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程序设计有所帮助。