ajax实现文本框的联想功能

先写一个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>

效果：