1: 展示页面信息
在对应页面引入 autoComplete的js文件 ,
<link rel="stylesheet" href="jQuery UI/jquery-ui-1.8.19.custom.css" type="text/css"/> <script src="jQuery UI/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="jQuery UI/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
输入框信息,
<input type="text" id="id" name="user.id" value ="" onkeyup="keyUp()" title="请输入用户编号"/>
KeyUp方法:
/** * autoComplete 用户编号查询 */ function keyUp(){ var id = document.getElementById("id").value; var url = "${pageContext.request.contextPath}/testAutoComplete.htm?stuStr="+id; $( "#id" ).autocomplete({ source:url, minLength:3 }); }
2:页面效果:(附件)
3:SpingMVC 控制器代码
package zhang.controller; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.mvc.Controller; import zhang.service.Test5Service; public class AutoCompleteController implements Controller { private Test5Service test5Service; private String stuStr; public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception { stuStr = request.getParameter("stuStr"); if( !"".equals(stuStr)&&null!=stuStr ){ List<String> list = test5Service.selStuId(stuStr); List<String> list1 = new ArrayList<String>(); for( String s:list ){ String s1 = "\""+s+"\""; list1.add(s1); } response.getWriter().print(list1); }else{ System.out.println("数据为空."); } return null; } public Test5Service getTest5Service() { return test5Service; } public void setTest5Service(Test5Service test5Service) { this.test5Service = test5Service; } public String getStuStr() { return stuStr; } public void setStuStr(String stuStr) { this.stuStr = stuStr; } }
5:配置信息
<bean name="/testAutoComplete.htm" class="zhang.controller.AutoCompleteController"> <property name="test5Service" ref="test5Service" /> </bean> <bean id="test5Service" class="zhang.service.impl.Test5ServiceImpl" > <property name="sessionFactory" ref="sessionFactory" /> </bean>