先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>联想搜索功能</title> </head> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("input[name=uname]").css({ "position":"relative" }); $("#lns").css({ "border":"1px #ccc solid", "width":"171px", "position":"absolute", "top":"84px", "left":"72px", "display":"none" }); // 键盘松开的时候触发联想功能 $("input[name=uname]").keyup(function(){ var uname = $(this).val(); if(uname != ""){ $.ajax({ url:"Qservlet", type:"post", data:{"uname":uname}, dataType:"html", async:true, success:function(result){ $("#lns").show(); $("#lns").html(result); // 点击模糊列表的值，必须在这里写，其他位置不起作用 $("li").unbind("click").bind("click", function(){ $("input[name=uname]").val($(this).html()); $("input[name=uname]").focus(); $("#lns").hide(); }); // 点击其他地方的时候隐藏 //$("input[name=uname]").blur(function(){ // $("#lns").hide(); //}); } }); }else{ $("#lns").html(""); $("#lns").hide(); } }); }); </script> <body> <h3>输入框联想搜索功能</h3> 请输入：<input type="text" name="uname"><input type="button" value="搜索"> <div id="lns"></div>// 设置显示的位置 </body> </html>
后台servlet接受数据引用dao层进行模糊查询,然后在传入显示的页面，然后在实现指定的div中进行显示
package Servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import dao.DBHelper;
import util.DBUtil;
@WebServlet("/Qservlet")
public class Qservlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("okok");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String uname = request.getParameter("uname");
DBHelper dbh=new DBHelper();
List<String> list=dbh.queryScoreByName(uname);
for (String str : list) {
System.out.println(str);
}
request.setAttribute("unames", list);
request.getRequestDispatcher("divLns.jsp").forward(request, response);
}
}
dao层进行查询
package dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import util.DBUtil; public class DBHelper { public List<String> queryScoreByName(String name) { // TODO 自动生成的方法存根 try{ List<String> list=new ArrayList<String>(); String sql="select * from t_corp$ where CORP_NAME LIKE ‘%"+name+"%‘" ; Connection conn1=DBUtil.getConn(); Statement stmt=conn1.createStatement(); ResultSet rs=stmt.executeQuery(sql); while(rs.next()){ list.add(rs.getString(5)); } return list; }catch(Exception ex){ ex.printStackTrace(); return null; } } }
显示的jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>联想搜索功能</title> </head> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("ul").css({ "padding":"0px", "margin":"0px", "list-style":"none", "width":"100%", "text-align": "left", }); $("li").css({ "padding":"0px", "margin":"0px", "width":"100%" }); $("li").hover( function(){ $(this).css({"background-color":"#ddd"}); }, function(){ $(this).css({"background-color":"#fff"}); } ); }); </script> <body> <ul> <c:forEach begin="1" end="3" items="${unames }" var="uname" step="1"> <li>${uname }</li> </c:forEach> </ul> </body> </html>
效果：
原文：https://www.cnblogs.com/quyangzhangsiyuan/p/11991675.html