基於SSM框架實現Ajxa實現搜尋自動提醒功能
阿新 • • 發佈：2019-02-01
SearchUserByAjax.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=ISO-8859-1"> <title>使用Ajxa實現搜尋自動提醒功能</title> </head> <body> <p>請輸入要搜尋的使用者名稱：</p> <input id="search_input" type="text" style="width:300px;" onkeyup="test(this.value,event)" /> <select multiple="multiple" id="sel" onchange="test2()" style="width:300px;display:none;color:gray"></select> </body> </html> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> function test(keyword,event){ //定義全域性變數 var sel = document.getElementById("sel"); $.ajax({ url : "/SSM/AjaxController/ajax.do", type : "GET", dataType:"json", contentType : "application/json;charset=UTF-8", //<!-- 向後端傳輸的資料 --> data :{ username: $("#search_input").val(), }, success:function(result) { //<!-- 處理後端返回的資料 --> for(var i=0;i<result.length;i++){ //將當前迴圈滿足條件的商品名稱生成一個下拉的選項 sel.options[i]=new Option(result[i].username,i); } //自動設定高度 sel.size=result.length; //判斷是否有滿足條件的商品 if(result.length>0){ sel.style.display='block'; }else{ sel.style.display='none'; } }, error:function(result){ alert("error"); } }); //當用戶按下上下鍵時獲取相應的值 if(event.keyCode==40){ sel.focus(); } }; function test2(){ //將選中的下拉列表中的內容新增到輸入框中 $("#search_input").val($("option:selected").text()); //輸入回車，獲取輸入框內容焦點 $("#sel").keypress(function(){ $("#search_input").focus(); $("#search_input").attr("onkeyup",""); $("#sel").hide(); }); //雙擊，獲取輸入框內容焦點 $("#sel").click(function(){ $("#search_input").focus(); $("#sel").css("display","none"); /* var keyword=$("#search_input").val(); location.href="/blog/user/search?searchid="+keyword;*/ }); } </script>
AjaxController.java
其他的有空再補上去package controller; import java.io.IOException; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import model.User; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import service.UserService; @Controller @RequestMapping("/AjaxController") @Scope("prototype") public class AjaxController { //自動注入業務層的userService類 @Autowired UserService userService; @RequestMapping("/ajax") public void test(User user,HttpServletResponse resp) throws IOException { System.out.println("已經成功進入AjaxController"); String username = user.getUsername(); List<User> UserList=userService.selectByLikeName(username); //把list實體封裝到json物件中 JSONArray jArray=JSONArray.fromObject(UserList); //向客戶端輸出json物件 System.out.println("jArray.toString():"+jArray.toString()); resp.getWriter().write(jArray.toString()); } }