Jquery-autocomplete简单应用

最新推荐文章于 2019-11-07 10:30:59 发布

想成为工程师的码农

最新推荐文章于 2019-11-07 10:30:59 发布

阅读量84

点赞数

分类专栏： Jquery 文章标签： Jquery autocomplete

Jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <link href="autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="autocomplete/jquery.autocomplete.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#empCode").autocomplete("autoCompleteAction.action", {
				cellSeparator: "|",
				lineSeparator: "\n",
				minChars: 1,//最小输入数
				maxItemsToShow: 10,//最大显示条数
				formatItem: function(row) {
					//var obj=eval("("+row+")");//将JSON转换成对象
					return "员工代码->" +row[0] + " 姓名->" +row[1]+ " 年龄:" + row[2];//显示格式，自定义
				},
				onItemSelect: function(li) {
					$("#empName").val(li.extra[0]);
					$("#age").val(li.extra[1]);
					$("#orgName").val(li.extra[2]);
				}
			});
		});
	</script>
  </head>
  	
  <body>
    员工代码：<input type="text" name="empCode" id="empCode" size="70"><br>
    姓名：<input type="text" name="empName" id="empName" readonly="readonly"><br>
    年龄：<input type="text" name="age" id="age" readonly="readonly"><br>
    部门：<input type="text" name="orgName" id="orgName" readonly="readonly"><br>
  </body>
</html>

public class AutoCompleteAction extends ActionSupport {

    private String q;//用于接收前台数据 ，必须是q不能时其他名称
    private User user;
    private List<User> userList;
    private AutoCompleteService autoCompleteService;

    /**
     * @return the userList
     */
    public List<User> getUserList() {
        return userList;
    }

    /**
     * @param userList the userList to set
     */
    public void setUserList(List<User> userList) {
        this.userList = userList;
    }

    /**
     * @return the user
     */
    public User getUser() {
        return user;
    }

    /**
     * @param user the user to set
     */
    public void setUser(User user) {
        this.user = user;
    }

    /**
     * @param autoCompleteService the autoCompleteService to set
     */
    public void setAutoCompleteService(AutoCompleteService autoCompleteService) {
        this.autoCompleteService = autoCompleteService;
    }

    /**
     * @return the q
     */
    public String getQ() {
        return q;
    }

    /**
     * @param q the q to set
     */
    public void setQ(String q) {
        this.q = q;
    }

    @SuppressWarnings("unchecked")
    public String complete() throws IOException {

        userList = autoCompleteService.selectAll(q);
        System.out.println(userList.size());
        HttpServletResponse response=ServletActionContext.getResponse();
        response.setContentType("text/html;charset=utf-8");
        for (User user : userList) {
            response.getWriter().println(user.getId() + "|" + user.getUserName()+ "|" +user.getAge() + "|" + user.getAddr());
        }
        return null;
    }

}

public class AutoCompleteDaoImpl extends HibernateDaoSupport implements AutoCompleteDao {

    /**
     * @param q
     * @return
     * @see com.acca.dao.AutoCompleteDao#selectAll(java.lang.String)
     */
    @SuppressWarnings("unchecked")
    @Override
    public List<User> selectAll(final String q) {
        return (List<User>) getHibernateTemplate().execute(new HibernateCallback() {
            
            @Override
            public Object doInHibernate(Session session) throws HibernateException, SQLException {
                return session.createQuery("from User u where u.addr like ?")
                              .setParameter(0, ('%'+q+'%'))//注意模糊查询时注意% ，参数从0开始
                              .list();
            }
        });
    }

}