使用jQuery实现实时模糊查询功能
2024-06-20 00:50:07
先说一下模糊查询 在方法上写的SQL是跟数据库里边的不一样，这里果断入坑了。
来个MySQL例子：
模糊查询user中的name： select * from user where name like ‘%你想查的数据%’;
在SSM里这样写会出错，如下：
Parameter index out of range (1 > number of parameters, which is 0).
正确写法： @Select(“select * from user where name like CONCAT(‘%’,#{name},’%’)”) 里边的#{name}就是你想查的数据
上代码
mapper.java
//查询所有帖子列表 (统计回复 top/ 时间降序 limit 20)@Select("select count(rp.rcontent) as replyNum,p.*,u.user_name from t_posts p left join t_user u on u.user_id=p.user_id left join t_rpost rp on p.id=rp.post_id group by p.id order by p.top desc,p.starttime desc limit 20")List<Posts> getPostListLimit();//根据帖子标题模糊查询 （降序）@Select("select count(rp.rcontent) as replyNum,p.*,u.user_name from t_posts p left join t_user u on u.user_id=p.user_id left join t_rpost rp on p.id=rp.post_id where p.title like CONCAT('%',#{title},'%') group by p.id order by p.top desc,p.starttime desc")List<Posts> queryByTitle(String title);service.java
//首页 获取帖子列表public List<Posts> getPostListLimit(){List<Posts> PostsList= mapper.getPostListLimit();return PostsList;}//模糊查询帖子标题public List<Posts> getPostsByTitle(String title){return mapper.queryByTitle(title);}controller.java
//跳转到帖子主页列表@RequestMapping(value="getPostsIndex")public String getPostsIndex(){return "post/postsIndex";}//首页 获取前二十条帖子列表@RequestMapping(value="getPostListLimit",method=RequestMethod.POST)@ResponseBodypublic List<Posts> getPostListLimit(){return service.getPostListLimit();}//模糊查询帖子标题@RequestMapping(value="getPostsByTitle",method=RequestMethod.POST)@ResponseBodypublic List<Posts> getPostsByTitle(@Param("title")String title){return service.getPostsByTitle(title);}jsp页面 （只有相关部分）：
JS/CSS:
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/layui/res/layui/layui.js"></script>
<script type="text/javascript" src="${ctxStatic}/laypage/laypage.js"></script>
<link rel="stylesheet" href="${ctxStatic}/laypage/skin/laypage.css"/>
<link rel="stylesheet" href="${ctxStatic}/layui/res/layui/css/layui.css"/>
<link rel="stylesheet" href="${ctxStatic}/layui/res/css/global.css"/>
DIV:
<div class="content"><div class="fly-tab fly-tab-index"><span><a href="${ctx}/getAllPostsIndex">全部</a><a href="jie/index.html">未结帖</a><a href="jie/index.html">已采纳</a><a href="jie/index.html">精帖</a><a href="${ctx}/getPostUserHome">我的帖</a></span><div class="fly-search"><!-- <button class="iconfont icon-sousuo"></button> --><input class="layui-input" placeholder="请输入标题关键字。。。" id="search"></div><a href="${ctx}/addPostInput" class="layui-btn jie-add">发布问题</a></div><ul class="fly-list" id="result"></ul><!-- 置顶/加精 --><ul class="fly-list-top" id="top_list"></ul><!-- 普通帖 --><ul class="fly-list" id="_list"></ul><!-- 分页div --> <div id="fenye" style="text-align: center;margin: 0 auto;"><div class="page_list"></div></div><!-- <ul id="biuuu_city_list" class="fly-list"></ul><div id="biuuu_city" style="text-align: center;"></div> --><div style="text-align: center" id="gengduo"><div class="laypage-main"><a href="${ctx}/getAllPostsIndex" class="laypage-next">更多求解</a></div></div></div>
jQuery+Ajax： /加载主页列表/
<script type="text/javascript">$(document).ready(function(){$('#result').empty().hide();$.ajax({method:'post',url:'${ctx}/getPostListLimit',dataType:'json',success:function(data){if(data.length>0){for(var i=0;i<data.length;i++){if(data[i].top==1&&data[i].nice==1){var html='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'<span class="fly-tip-stick">置顶</span>'+'<span class="fly-tip-jing">精帖</span>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint">' +'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i> '+data[i].view+''+'</span>'+'</p>'+'</li>';$('#top_list').append(html);}if(data[i].top==1&&data[i].nice==0){/* 置顶帖 */var html1='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'<span class="fly-tip-stick">置顶</span>'//+'<span class="fly-tip-jing">精帖</span>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint">' +'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i> '+data[i].view+''+'</span>'+'</p>'+'</li>';$('#top_list').append(html1);}if(data[i].top==0&&data[i].nice==1){/* 加精帖 */var html2='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'//+'<span class="fly-tip-stick">置顶</span>'+'<span class="fly-tip-jing">精帖</span>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint">' +'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i>'+data[i].view+''+'</span>'+'</p>'+'</li>';$('#_list').append(html2);}if(data[i].top==0&&data[i].nice==0){/* 普通帖 */var html3='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+' <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint"> '+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i>'+data[i].view+''+'</span>'+'</p>'+'</li>';$('#_list').append(html3);}}}else{//layer.msg("无数据信息！",{time:1500});var html='<div class="fly-none">并无相关数据</div>';$('.fly-list').append(html);}},error:function(data){layer.msg("数据加载失败，错误信息："+JSON.stringify(data),{time:10000});}}) })</script>/加载实时搜索和分页/
<script type="text/javascript">//搜索$('#search').bind('input propertychange',function(){ $('#_list').empty().hide();$('#top_list').empty().hide();$('#gengduo').hide();var input="";$('#result').empty().show();input =$('#search').val();if(input.length<0||input==null||input==""){$('#result').empty();} $.ajax({method:'post',url:'${ctx}/getPostsByTitle?title='+input,dataType:'json',success:function(data){if(data.length>0){var nums = 10; //每页出现的数量var pages = Math.ceil((data.length)/nums); //得到总页数var thisDate = function(curr){//此处只是演示，实际场景通常是返回已经当前页已经分组好的数据last = curr*nums - 1;var str=""; var str1="";var str2="";var str3="";last = last >= data.length ? (data.length-1) : last;for(var i = (curr*nums - nums); i <= last; i++){/* for(var i=0;i<data.length;i++){ */if(data[i].top==1&&data[i].nice==1){str+='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'<span class="fly-tip-stick">置顶</span>'+'<span class="fly-tip-jing">精帖</span>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint">' +'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i> '+data[i].view+''+'</span>'+'</p>'+'</li>';//$('#result').append(html);}if(data[i].top==1&&data[i].nice==0){/* 置顶帖 */str1+='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'<span class="fly-tip-stick">置顶</span>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint">' +'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i> '+data[i].view+''+'</span>'+'</p>'+'</li>';}if(data[i].top==0&&data[i].nice==1){/* 加精帖 */str2+='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'<span class="fly-tip-jing">精帖</span>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint">' +'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i>'+data[i].view+''+'</span>'+'</p>'+'</li>';}if(data[i].top==0&&data[i].nice==0){/* 普通帖 */str3+='<li class="fly-list-li">'+'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'+' <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'+'</a>'+'<h2 class="fly-tip">'+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'+'</h2>'+'<p>'+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'+'<span>'+data[i].starttime+'</span>'+'<span>layui框架综合</span>'+'<span class="fly-list-hint"> '+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''+'<i class="iconfont" title="人气"></i>'+data[i].view+''+'</span>'+'</p>'+'</li>';}}return str+str1+str2+str3;};//调用分页laypage({cont: $('.page_list'),pages: pages, //总页数 groups:3, //连续显示的分页数 // skip:true,//是否显示跳转功能skin:'#009688', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00jump: function(obj,first){document.getElementById('result').innerHTML = thisDate(obj.curr); }})}else{var html='<div class="fly-none">并无相关数据</div>';$('#top_list').empty().hide();$('#_list').empty().hide();$('#result').append(html);}},error:function(data){layer.msg('请求异常，请重试'+JSON.stringify(data), {shift: 6,time:3000});}})});
</script>搜索效果：
随着你的输入直接显示搜索结果。
当你清空搜索框时 直接加载所有数据 每十条数据为一页。
使用jQuery实现实时模糊查询功能相关推荐
- js根据数据关键字实现模糊查询功能
js根据数据关键字实现模糊查询功能 模糊查询 实现模糊查询功能的步骤和一般方法 第一步:创建假数据或请求接口数据 第二步:分析数据格式,处理数据 第三步:验证功能 完整代码 模糊查询 模糊查询功能是指 ...
- jQuery实现id模糊查询
在js中常常会用到某类似id的模糊查询,可以使用jquery工具和模糊查询"^",来实现.下面用另个例子说明 eg_1. 在页面中查找某id图片集合,先放到代码: <div ...
- pythonsqlite3模糊_Python编写通讯录通过数据库存储实现模糊查询功能
1.要求 数据库存储通讯录,要求按姓名/电话号码查询,查询条件只有一个输入入口,自动识别输入的是姓名还是号码,允许模糊查询. 2.实现功能 可通过输入指令进行操作. (1)首先输入"add& ...
- ajax jsp模糊查询源码,Ajax动态执行模糊查询功能
Ajax动态执行模糊查询功能 内容精选 换一换 Profiling采集的数据较多,同时解析后展示的性能指标项也比较多,为方便用户快捷查找到具体性能指标的含义,提供命令行查询功能:不包含metric_n ...
- ElasticSearch入门：使用ES来实现模糊查询功能
ElasticSearch入门:使用ES来实现模糊查询功能 需求描述 方案设计 代码设计 测试中遇到的问题 总结与心得 需求描述 本文针对在工作中遇到的需求:通过es来实现模糊查询来进行总结:模糊查询 ...
- TIPTOP 实现T100程序模糊查询功能
使用T100,在menu界面和Ctrl+G功能时,可以只输入部分字符或中文就可以将匹配的程序全部列出来供选择而TOP GP暂时还不支持这个功能,用惯了T100再回来用GP就很不习惯了,于是改善下,直接 ...
- ofice2007 没有下拉框模糊查询功能
ofice2007没有下拉框模糊查询功能 另外安装一下wps2019,换着用.
- html下拉菜单模糊查询,Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: 可输入的下拉框 var j ...
- jQuery 实现 select模糊查询 反射机制
通过如下代码就可以简单实现select带模糊查询的条件查询,具体如下jquery.select.js如下: (function($) { $.selectSuggest = function(targ ...
最新文章
- ==和equals()的作用及区别
- linux kill杀死进程
- Vue3导入Vue-router报错：Uncaught SyntaxError: The requested module does not provide
- 关于 Angular 项目类型为 library 的工程使用 tsconfig.json 的问题
- final 在 java 中有什么作用？
- HDU-1518 Square dfs+剪枝
- 如何构建一个拖垮整个公司的备份系统
- 12个ggplot2扩展包帮你实现更强大的可视化
- SparkSQL JSON数据操作(1.3-1.4)
- java练习题-求int类型N值的阶乘
- 小米个性主题显示服务器不可用,MIUI个性主题上线透明壁纸功能，并修复状态栏无法混搭问题！...
- visual studio code Python终端运行_微软常用运行库合集 v2020.5.20 装机必备神器静默整合免费版...
- word稿件转化 成html格式后 图片很模糊是什么原因,你保存的word和pdf文档图片为什么变模糊了？...
- 【记Unexpected token】
- 初识Java反序列化
- OpenCV入门（C++/Python）-使用OpenCV裁剪图像（四）
- Windows XP 上网提示：您的时钟快了/慢了
- php文件域的作用,在word中何为域
- dagger2系列之Scope
- 中国电信吴湘东：云网一体化将为运营商带来新的融合和创新