来自服务器端Spring MVC的jQuery Autcomplete

Question

//this is my jsp page, i need autocomplete for text box 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>

//My controller method is below

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

}

//service implementation method is

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 implementation method is

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

i am fresher to java spring. I have searched lot of js but not get proper one. Can any one help me a good jquery method pls.

Answer 1

This is the one that we use on our project, using ajax it´s pretty good http://jqueryui.com/autocomplete/

some code example

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

Answer 2

I hope below samples help you

    <link rel="stylesheet" href="css/jquery-ui.css"></link>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="./js/jquery-ui.js"></script>
        <script>
            $(document).ready(function(){
                            $("#projectname").autocomplete(
                                    {
                                        source : "BaselineNames?projectname="
                                                + $("#projectname").val(),
                                        select : function(ui, item) {
                                            $("#projectname").val(item);
                                        }
                                    });
             });
            </script>
        <label for="projectname" class="col-sm-2 control-label">Project
                                    Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="projectname"
                                        name="name" placeholder="Project Name Eg : UIIC Android App">
                                </div>