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 ="" οnkeyup="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>