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());  
		}	
}
其他的有空再補上去