java - 来自服务器端 spring mvc 的 jquery 自动完成

Question

//这是我的jsp页面，我需要自动完成文本框name=empid。

<div class="topcorner" align="right" >
<form action="search.htm" method="POST">

        EmpId : <input type="text" name="empid" id="EmpId">
        Start Date :<input type="text" name="stDate" />
        End Date :<input type="text" name="enDate" />
        <br>
        <input type="submit" value="Search" name="submit" ><br>
</form>

//我的 Controller 方法如下

@RequestMapping(value= "/getEmpid", method = RequestMethod.GET )
public @ResponseBody List<UserAttendance> autoComplete(@RequestParam("term") String empId,
            @RequestParam("extra") String extra) {
List<UserAttendance> getEmp = adminService.autoComplete(empId);
    return getEmp;

}

//服务实现方法是

public List<UserAttendance> autoComplete(String empId) {

    List<UserAttendance> getEmpid = adminDao.autoComplete(empId);

    for(UserAttendance emp : getEmpid ) {
          if(emp.getEmpId().contains(empId)){
              getEmpid.add(emp);
          }
    }
    return getEmpid;
}

//Dao实现方法为

@Override
public List<UserAttendance> autoComplete(String empId) {
    // TODO Auto-generated method stub
    String sql = "SELECT EMP_ID FROM attendance WHERE EMP_ID LIKE '%?%'";

    List<UserAttendance> getEmp = getSimpleJdbcTemplate().query(sql,
            ParameterizedBeanPropertyRowMapper.newInstance(UserAttendance.class), empId);

    return getEmp;
}

我对 java spring 比较陌生。我搜索了很多 js 但没有找到合适的。 任何人都可以帮助我一种好的 jquery 方法吗？

Answer 1

这是我们项目中使用的，使用ajax非常好 http://jqueryui.com/autocomplete/

一些代码示例

         initializeAutocompleteDepartment = function (componentId) {
    $("#" + componentId + "SelectBox").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'foo/bla/' + request.term + '.do',
                dataType: "json",
                success: function (data) {
                    response(data);
                }
            });
        },
        messages: {
            noResults: '',
            results: function () {
            }
        },
        minLength: 2,
        select: function (event, ui) {
            updateData(ui.item, componentId);
            return false;
        }
    }).data("ui-autocomplete")._renderItem = function (ul, data) {
        return $("<li>")
            .append("<a>" + data.name + "</a>")
            .appendTo(ul);
    };
};