JAVA-WEB AJAX 搜尋條自動提示
阿新 • • 發佈:2019-02-19
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;
}
}