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

前台页面中代码:

  

1
2
3
4
5
6
7
8
9
10
11
12
13
<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}

这样自动完成就实现了。

  

JQuery输入自动完成,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。