JQuery输入自动完成

浏览数：17 / 时间：2015年06月09日

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