ajax完成仿瀏覽器搜尋框輸入部分內容提示
阿新 • • 發佈：2019-01-14
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"> <title>搜尋頁面</title> </head> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $(function(){ //文字框keyup的時候傳送ajax $("#tid").keyup(function(){ //獲取文字框中的值 var $value = $(this).val(); //alert($value); //內容為空的時候不傳送ajax if($value!=null&&$value!=''){ //清空div $("#did").html(""); $.post( "/ajax_/search", "kw="+$value, function(d){ //alert(d); var arr = d.split(","); //遍歷陣列 $(arr).each(function(){ //可以將每一個值放入一個div,將其插入到id為did的div $("#did").append($("<div>"+this+"</div>")); }); //將div顯示 $("#did").show(); } ); }else{ //內容為空的時候，將div隱藏 $("#did").hide(); } }); }) </script> <body> <center> <div> <h1>搜尋</h1> <div> <input name="kw" id="tid"><input type="button" value="搜尋一下"> </div> <div id="did" style="border:1px solid red;width:241px;height:100px;position: relative;display: none"></div> </div> </center> </body> </html>
servlet
package com.huida.servlet; import java.io.IOException; 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.huida.service.KeyWordService; public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //0設定編碼 response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); //1.獲取引數 String kw = request.getParameter("kw"); //System.out.println(kw); //service //dao a //2.呼叫service完成模糊操作 返回值list List<Object> list = new KeyWordService().findKw4Ajax(kw); //3.將資料集合[a,aa,aaa]遍歷返回給search.jsp if(list!=null&&list.size()>0){ String str = list.toString(); str =str.substring(1, str.length()-1); //System.out.println(str); response.getWriter().println(str); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
service
package com.huida.service;
import java.util.List;
import com.huida.dao.KeyWordDao;
public class KeyWordService {
public List<Object> findKw4Ajax(String kw){
return new KeyWordDao().findKw4Ajax(kw);
}
}
dao
package com.huida.dao; import java.sql.SQLException; import java.util.List; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.ColumnListHandler; import com.huida.utils.DataSourceUtils; public class KeyWordDao { public List<Object> findKw4Ajax(String kw){ QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select kw from keyword where kw like ? limit 5"; try { return qr.query(sql, new ColumnListHandler("kw"),"%"+kw+"%"); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; } }