大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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; } }
第六步：
完成并测试
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/168292.html原文链接：https://javaforall.net
