Spring框架：JQuery自动完成搜索框

我想寻求您的帮助，了解如何在SpringWeb开发中拥有一个自动完成的搜索框，但我似乎做得不对？这些是我正在使用的代码。请帮忙，谢谢

UserRoleService.java

public interface UserRoleService {
    List<UserRole> getUserRole(UserRole userRole) String role;
}

---

此处的

empRole

看起来可疑，它应该是

minLength

（您错过了n）。改为做类似的事情

var userRoles;
        $(function () {
            $("#empUserRole").autocomplete({
                source: function (request, response) {
                    if (typeof userRoles === 'undefined') {
                        $.ajax({
                            type: "GET",
                            url: "use/proper/url/to/userRole",
                            data: {
                              create:false,                                
                            },
                            cache: false,
                            success: function (data) {
                                userRoles = data;
                                response($.ui.autocomplete.filter(userRoles, request.term));
                            },
                            error: function () {
                                alert("Error while retrieving Client list(Connection failed).");
                            }
                        });
                    }
                },
                minLength: 4
            });
        });

它将角色存储在

userRoles

中，并确保您使用正确的URL。从我在代码中看到的内容来看，您缺少servlet上下文路径

@RequestMapping(value = "userRole", method = RequestMethod.GET)
public @ResponseBody
List<UserRole> getUserRole(@RequestParam("term") String role)
        throws Exception{
    List<UserRole> userRoleList = userRoleService.getUserRole(role);
        ArrayList roleList = new ArrayList();
        int count = 0;
        for(UserRole ei : roleList){

            UserRole roleInfo = new UserRole();

            roleInfo.put("empUserRole", ei.getUserRole());  

            roleInfo.put("value", ei.getUserRole());
            roleInfo.put("label", ei.getUserRole());
            roleList.add(roleInfo);
            count++;

            if(count > AUTOCOMPLETE_SIZE){
                break;
        }
    }
    return roleList;
}

<form:form commandName ="userRoleForm" id="userRoleForm">
    <table>
        <tr>
            <td>User Role</td>
            <td><form:input path ="userName" id="empUserRole"/></td>
        </tr>
    </table>
</form:form>

$("#empUserRole").autocomplete({
    var empRole = {
        source: "userRole",
        select: function(event, ui){
            $("empUserRole").val(ui.item.empUserRole);
        },
    miLength: 4
    };
});

var userRoles;
        $(function () {
            $("#empUserRole").autocomplete({
                source: function (request, response) {
                    if (typeof userRoles === 'undefined') {
                        $.ajax({
                            type: "GET",
                            url: "use/proper/url/to/userRole",
                            data: {
                              create:false,                                
                            },
                            cache: false,
                            success: function (data) {
                                userRoles = data;
                                response($.ui.autocomplete.filter(userRoles, request.term));
                            },
                            error: function () {
                                alert("Error while retrieving Client list(Connection failed).");
                            }
                        });
                    }
                },
                minLength: 4
            });
        });