春季框架:jQuery自动完成搜索框

Question

我想向您寻求有关如何在Spring Web开发中拥有一个自动搜索框的帮助，但我似乎不正确吗？这些是我正在使用的代码。请帮忙，谢谢！

userroleservice.java

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

userroleserviceimpl.java

public class UserRoleServiceImpl implements UserRoleService {
    private UserRoleDao userRoleDao;
    @Autowired
    UserRoleServiceImpl(UserRoleDao userRoleDao){
        this.userRoleDao = userRoleDao;
    }   
    public List<UserRole> getUserRole(UserRole userRole, String role)throws Exception{
        List<UserRole> userRoleList = userRoleDao.getUserRole(userRoleDao);
        return userRoleList;
    }
}

控制器

@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;
}

userrole.jsp

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

userrole.js

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

Answer 1

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上下文路径。