大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
第一步:
创建表单,放搜索框
<form > 输入用户名:<input type="text" id="username" > <span id="usernameInfo"></span><br> <br> <div style="position:relative"> <input id="search" type="text" placeholder="Search" onkeyup="searchWord(this)"> <button type="submit">Submit</button> <div id="showDiv" style="display:none;position:absolute;z-index:1000;background:#fff; width:141px;border:1px solid #ccc;"></div> </div> </form>
第二步:
写JS
<script type="text/javascript"> function overFn(obj){ $(obj).css("background","#DBEAF9"); } function outFn(obj){ $(obj).css("background","#fff"); } function clickFn(obj){ $("#search").val($(obj).html()); $("#showDiv").css("display","none"); } function searchWord(obj){ //1、获得输入框的输入的内容 var word = $(obj).val(); //2、根据输入框的内容去数据库中模糊查询---List<Product> var content = ""; $.post( "${pageContext.request.contextPath}/searchWord", {"word":word}, function(data){ //3、将返回的商品的名称 现在showDiv中 if(data.length>0){ for(var i=0;i<data.length;i++){ content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>"; } $("#showDiv").html(content); $("#showDiv").css("display","block"); } }, "json" );
} </script>
第三步:
在Web层创建Servlet,使用的gson转换的json格式,需要导包
public class SearchWordServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获得关键字 String word = request.getParameter("word"); //查询改关键字的所有商品 UserService service = new UserService(); List<Object> userList = null; try { userList = service.findUserByWord(word); } catch (SQLException e) { e.printStackTrace(); } //[{"username":"admin","phone":"17805054371","role":"超级管理员"...},{},{}...] //使用json的转换工具 /*1、JSonlib JSONArray fromObject = JSONArray.fromObject(userList); String string = fromObject.toString(); System.out.println(string); */ Gson gson = new Gson(); String json = gson.toJson(userList); response.setContentType("texy/html;charset=UTF-8"); response.getWriter().write(json); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }
第四步:
创建Service
public class UserService { public List<Object> findUserByWord(String word) throws SQLException { UserDao dao = new UserDao(); return dao.findUserByWord(word); } }
第五步:
创建Dao,使用的C3P0和DBUtils
public class UserDao { public List<Object> findUserByWord(String word) throws SQLException { QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource()); String sql = "select * from user where username like ? limit 0,8"; List<Object> query = runner.query(sql,new ColumnListHandler("username"),"%"+word+"%"); return query; } }
第六步:
完成并测试
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168292.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...