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;" οnkeyup="test(this.value,event)" /> <select multiple="multiple" id="sel" οnchange="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()); } } 其他的有空再补上去