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}

这样自动完成就实现了。

巴特西

JQuery输入自动完成

最新文章

热门文章