JAVA-WEB AJAX 搜索条自动提示

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<title>站内搜索</title>

<style type="text/css">
    .xiala{
        width: 100px;
        background-color: #fcfcfc;
        border:1px solid gray;
        display: block;
    }
    .show-row:hover{
        background-color: #f5f6f7;
    }
</style>

<script type="text/javascript">
    //提示条目点击事件，将该行添加到搜索input中
    function rowClick(obj) {
        var rowText = obj.innerHTML;
        var sInput = $("#search-input");
        var showText = $("#xiala");
        sInput.val(rowText);
        showText.css('display','None');
    }

    //ajax搜索函数将input中的参数发给servlet，
    //然后将servlet返回的列表显示在搜索条下面的div中
    function search(obj) {
//         window.console.log(obj.value);
        var text = obj.value;
        var showText = $("#xiala");
        showText.css('display','block');
        var content = "";
        if(text==''){
            return;
        }
        $.ajax({
            type : 'get',
            url : '${pageContext.request.contextPath}/search',
            data : {
                'text' : text,
            },
            dataType : 'json',
            success : function(data) {
                for(var i=0;i<data.length;i++){
//                     window.console.log(data[i].name);
                    content += "<div class='show-row' onclick='rowClick(this);'>" + data[i].name + "</div>"
                }
                showText.html(content);
//                 window.console.log(data);
                window.console.log('成功回调函数');
            },
            error : function() {
                window.console.log('失败回调函数');
            }

        })
    }
    

</script>

</head>
<body>
    <div>
        <input type="text" name='search-text' id='search-input' style="width:100px;" onkeyup="search(this);">
        <input type="submit" value="搜索">
    </div>
    <div id='xiala' class='xiala' >
    </div>
</body>
</html>

serlvet

package com.demo.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.fenye.domain.Student;
import com.demo.fenye.service.StudentService;
import com.google.gson.Gson;

public class Search extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//获得ajax传来的参数
		String parameter = request.getParameter("text");
		response.setCharacterEncoding("UTF-8");
//		ajax发来的get参数不用处理中文
//		parameter = new String(parameter.getBytes("iso8859-1"),"UTF-8");
		
		//调用服务获得模糊搜索到的所有学生的列表
		StudentService ss = new StudentService();
		List<Student> list = null;
		try {
			list = ss.fuzzySearch(parameter);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
//		for (Student student : list) {
//			System.out.println(student);
//		}
		//用gson转为json字符串并写浏览器
		Gson gson = new Gson();
		response.getWriter().write(gson.toJson(list));
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

service

package com.demo.fenye.service;

import java.sql.SQLException;
import java.util.List;

import com.demo.fenye.DAO.StudentDAO;
import com.demo.fenye.domain.Page;
import com.demo.fenye.domain.Student;

public class StudentService {


	public List<Student> fuzzySearch(String parameter) throws SQLException {
		StudentDAO sDao = new StudentDAO();
		List<Student> list = sDao.fuzzySearch(parameter);
		return list;
	}

}

dao

package com.demo.fenye.DAO;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.demo.fenye.domain.Page;
import com.demo.fenye.domain.Student;
import com.demo.fenye.utils.C3P0Utils;

public class StudentDAO {

	public List<Student> fuzzySearch(String parameter) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
		String sql = "select * from student where name like ?";
		List<Student> query = qr.query(sql, new BeanListHandler<Student>(Student.class), "%" + parameter + "%");
		return query;
	}



}

JAVA-WEB AJAX 搜索条自动提示

猜你喜欢