JQuery的autocomplete自动补全记录

引用的CSS和JS

<link type="text/css" rel="stylesheet" href="../css/jquery-ui.min.css" />

<script src="../script/jquery-1.8.3.js"></script>

<script src="../script/jquery-ui.min.js" type="text/javascript"></script>

声明HTML标签

<input type="text" id="classCode" name="classCode" value="" placeholder="请输入班级编号名称" />

 JS函数

$(function() {
		/* 回调值得全局变量 */
		var returnResult;
		$("#classCode").autocomplete({
			//最少输入一个字符
			minLength : 1,
			delay : 0,
			autoFocus : true,
			source : function(request, response) {
				$.ajax({
					type : "POST",
					url : "/clazz/getClazzByCode.htm",
					dataType : "json",
					data : {
						selectClassCode : $("#classCode").val()
					},
					success : function(json) {
						response($.map(json.classCode, function(item) {
							var returnResult = item.split("#");
							return {
								label : returnResult[0] + "-" + returnResult[1],
								value : item
							};
						}));
					}
				});
			},
			//当一行被选中时赋值,本身的input被return的value覆盖无法赋值
			select : function(e, ui) {
				returnResult = ui.item.value.split("#");
				$("#classId").val(returnResult[2]);
				$("#className").val(returnResult[1]);
			},
			//锁定上下箭头键盘事件改变input值而暴露id的行为
			focus:function(e,ui){
				e.preventDefault();
			},
			//当下拉框关闭的时候赋值,赋值本身覆盖return的值
			close : function(e, ui) {
				//如没有查找到信息时关闭判断是否为空,避免前台js错误
				if (null != returnResult && null != returnResult[0]) {
					$("#classCode").val(returnResult[0]);
				}else{
					//用户没有选择数据,清空输入框
					$("#classCode").val("");
				}
			}
		});
	});

 

此处为Struts代码,SpringMVC直接return响应值即可,别漏掉注解@responseBody

@Resource
    private ClazzService clazzService;
    /**
     * 包含班级id code name 的集合
     */
    private List<String> classCode = new ArrayList<String>();


    /**
     * 查询条件 CODE
     */
    public String getClazzByCode() {
        Clazz selectClazz = new Clazz();
        selectClazz.setCode(selectClassCode);
        //防止前台用户选择数据时的二次请求
        if (-1 == selectClassCode.indexOf("#")) {
            List<Clazz> clazzList = clazzService.getClazzs(selectClazz, null, selectClassCode);
            //循环对象,拼接自己想要的字符串
            for (Clazz clazz : clazzList) {
                //使用相应的String集合返回到前台
                classCode.add(clazz.getCode() + "#" + clazz.getName() + "#" + clazz.getId());
            }
        }
        return SUCCESS;
    }


    @JSON(serialize = false)
    public void setSelectClassCode(String selectClassCode) {
        this.selectClassCode = selectClassCode;
    }


    private String selectClassCode;


    public List<String> getClassCode() {
        return classCode;
    }