java ajax文字搜素,JAVA-WEB AJAX 搜索条自动提示

jsp

pageEncoding="UTF-8"%>

站内搜索

.xiala{

width: 100px;

background-color: #fcfcfc;

border:1px solid gray;

display: block;

}

.show-row:hover{

background-color: #f5f6f7;

}

//提示条目点击事件，将该行添加到搜索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

//                     window.console.log(data[i].name);

content += "

" + data[i].name + "

"

}

showText.html(content);

//                 window.console.log(data);

window.console.log('成功回调函数');

},

error : function() {

window.console.log('失败回调函数');

}

})

}

serlvetpackage 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 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);

}

}

servicepackage 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 fuzzySearch(String parameter) throws SQLException {

StudentDAO sDao = new StudentDAO();

List list = sDao.fuzzySearch(parameter);

return list;

}

}

daopackage 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 fuzzySearch(String parameter) throws SQLException {

QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());

String sql = "select * from student where name like ?";

List query = qr.query(sql, new BeanListHandler(Student.class), "%" + parameter + "%");

return query;

}

}