JQuery输入自动完成

　　Combogrid 是一个jQuery插件用于为输入框添加高级自完成功能（auto-complete）。当用户输入的时候，会在输入框的下方面动态显示一个拥有分页功能 的表格（Grid）控件。 通过Ajax请求，然后结果以JSON（或JSONP：用于跨域请求）的数据类型返回。这个插件拥有许多选项可以配置比如：设置交替行的颜色，自动选择相匹配的查询结果， 设置当输入到第几个字符号才激活表格。此外还支持键盘操作。

　　涉及到的相关js和css:

　　1、jquery-ui-1.10.1.custom.css

　　2、jquery-ui-1.10.1.custom.min.js

　　3、jquery.ui.combogrid.css

　　4、jquery.ui.combogrid.js

前台页面中代码：

　　

<script>
$(document).ready(function(){
		$( "#project" ).combogrid({
		url: '/per/getTeacherList',
		debug:true,
		colModel: [{'columnName':'person_id','width':'10','label':'person_id'}, {'columnName':'person_name','width':'60','label':'person_name'},{'columnName':'org_name','width':'30','label':'org_name'}],
		select: function( event, ui ) {
			$( "#project" ).val( ui.item.person_name );
			return false;
		}
	});
});
</script>

<div>
　　<div style="float:left"><input size="30" id="project"/></div><br/> <br/>
　　<div id="switcher" style="float:right"></div>
</div>

jfinal中getTeacherList方法的代码示例：

public void getTeacherList(){
        //学校ID
        int bureau_id = 1;
        int page = getParaToInt("page");
        //每页显示行数
        int limit = getParaToInt("rows");
　　　　　　　　　　//查询条件
        String searchTerm = getPara("searchTerm");
        if(searchTerm==""){
            searchTerm = "%";
        } else {
            searchTerm = "%" + searchTerm + "%";
        }
        List<Record> person_list = Person.dao.getTeacherList(bureau_id,searchTerm);
        //总条数
        int count = person_list.size();
        //总页数
        int total_pages = 0;
        if(count > 0) {
            if(count%limit == 0){
                total_pages = count/limit;
            }else{
                total_pages = count/limit + 1;
            }
        }else{
            total_pages = 1;
        }
        if(page > total_pages) {
            page = total_pages;
        }
        //当前页起始行号
        int start = limit * page - limit;
        List<Record> list = null;
　　　　　//查询数据库
        if(total_pages != 0) {
            list = Person.dao.getTeacherList(bureau_id,searchTerm, start, limit);
        } else {
            list = Person.dao.getTeacherList(bureau_id,searchTerm);
        }
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("page", page);
        map.put("total", total_pages);
        map.put("records", count);
        List<Object> list2 = new ArrayList<>();
        for (int i = 0; i < list.size(); i++) {
            Map<String, Object> map2 = new HashMap<String, Object>();
            map2.put("person_id", list.get(i).get("PERSON_ID"));
            map2.put("person_name", list.get(i).get("PERSON_NAME"));
            map2.put("org_name", list.get(i).get("ORG_NAME"));
            list2.add(map2);
        }
        map.put("rows", list2);
        renderJson(JSON.toJSONString(map));
 
    }

最终返回给前台的JSON格式为：

{"page":1,"records":2,"rows":[{"org_name":"语文组","person_id":20,"person_name":"张三"},{"org_name":"语文组","person_id":21,"person_name":"李四"}],"total":1}

这样自动完成就实现了。