Я новичок в пользовательском интерфейсе, использующем javascript и jquery.Я хотел бы сделать форму автозаполнения, которая имеет корреляцию с другим объектом, но я не имею ни малейшего представления, чтобы создать форму автозаполнения.
Вот мой код:
pom.xml:
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.0</version>
</dependency>
Форма основного класса:
public class User {
private Integer userId;
private String name;
private Role roleId;
//setter getter
}
Подкласс для процесса автозаполнения:
public class Role {
private Integer roleId;
private String roleName;
//setter getter
}
Контроллер автозаполнения:
@Controller
public class AutoCompleteController {
@Autowired
RoleService roleService;
@RequestMapping(value="/autoCompleteRole", method=RequestMethod.GET)
public @ResponseBody
List<Role> autoComplete(@PathVariable String roleName) {
return roleService.getLikeRole("roleName");
}
}
Файл JSP:
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>Add/Edit Contact</title>
</head>
<body>
<div align="center">
<h3>Add/Edit User</h3>
<form:form action="${pageContext.request.contextPath}/saveUser" method="POST" modelAttribute="userData">
<table>
<form:hidden path="userId"/>
<tr>
<td>Name:</td>
<td><form:input path="name"/></td>
</tr>
<tr>
<td>Role:</td>
<td><form:input path="roleId.roleId"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Save"></td>
</tr>
</table>
</form:form>
</div>
</body>
</html>
<script language="javascript">
//Script of autocomplete NEED HELP!!!
</script>
Я хотел бы создать автозаполнение для объекта роли, в котором для отображения ввода используется значение roleName, но при сохранении формы для автозаполнения сохраните объект роли по roleId.
Спасибо.