ajax 文本框提示

先贴效果图吧：

                                      

美化方面，不足，有目共睹哈。。。

支持鼠标移动点击、键盘上下键回车选中

先贴HTML:

<td width="50%">

    <html:text property="questionTypeName" styleId="typeName" οnkeyup="getTypeName(this,'tcsQsAjax.do');"/>

    <div id="typeNameDiv" style="position: absolute; bottom: 1in;right: 1in; top: 1in;z-index:1001;overflow-y:auto;display:none;border:#acc8ec 1px solid;"/>

</td>

再贴CSS:

.input_Type{

   background-color: #FEF0C9;

}

#ul_background{

  background-color:white;

  margin-left:-40px;

  margin-top:-1px;

  list-style-type:none;

}

再贴JS：

/**
 * ajax 动态加载题目类型名称
 */
<script>
var typeName = $('#typeName').val();
var flag = false;
var typeInput = {
	li_index : -1,
	init : function(input, url) {
		//支持firefox
		var event = window.event || arguments.callee.caller.arguments[0];
		var keyAsc = event.keyCode;
		if($("#typeName").val() != typeName)
			if($("#typeName").val() == ""){
				typeInput.li_index = -1;
			}
			var typeName = $("#typeName").val();
			typeInput.findTypesByAjax(input, url);
		} else {
			typeInput.lightMove(keyAsc);
		}
	},
	findTypesByAjax : function(input, url) {
	
		//var assistParent = input.offsetParent;
		filedName = input.name;
		var param = "str=" + input.value;//键入的值
		var json = null;
        $.ajax({
                type:'post',  
                url:url+'?method=getTypesByName',  
                data:{str:input.value},  
                dataType: 'json', 
                success: function(response) {
			json = eval(response);
			if (json != null) {
				var myDiv = document.getElementById("typeNameDiv");
				typeInput.setDivPosition(input);// 设置div的位置
				var ul = typeInput.setUl(json, input);
				if(ul == undefined){
					myDiv.innerHTML = "";
					myDiv.style.display = "none";
					return ;
				}
				myDiv.innerHTML = ul;
				myDiv.style.display = "block";
			}
		},
		error: function(){
			alert("ajax查询类型名称失败！");
		}     
            });  
	},
	lightMove : function(keyAsc) {
		var li = document.getElementById("typeNameDiv")
				.getElementsByTagName("li");
		if (keyAsc == 40) {// 下键
			if (typeInput.li_index != -1) {
				// 恢复到原来的颜色
				li[typeInput.li_index].className = "";
			}
			typeInput.li_index++;
			// 如果到了最后一个元素，则从第一个开始
			if (typeInput.li_index == li.length) {
				typeInput.li_index = 0;
			}
			// 改变样式
			li[typeInput.li_index].className = "input_Type";
		}
		if (keyAsc == 38) {// 向上
			// 不等于-1时，索引自减
			if (typeInput.li_index != -1) {
				// 恢复到原来的颜色
				li[typeInput.li_index].className = "";
				typeInput.li_index--;
			}
			// 等于-1时，将索引移动最后一位
			if (typeInput.li_index == -1) {
				typeInput.li_index = li.length - 1;
			}
			li[typeInput.li_index].className = "input_Type";
		}
		if (keyAsc == 13 && typeInput.li_index != -1) {// 回车
			// 调用设值方法
			typeInput.fillTypeInputText(filedName, li[typeInput.li_index]);
		}
	},
	//设置UL
	setUl : function(json, input) {
		if (json == undefined || json == "") {
			return;
		}
		var ul = "<ul id='ul_background' style='width:"
				+ typeNameDiv.style.width + "; left: 0px; margin-left: 0px;'>";
		for (var index in json) {
			var userObject = json[index];
			var name = userObject["name"];
			var filedValue = userObject["id"];
			if (name == undefined) {
				continue;
			} else {
				if (index == 0) {
					ul += "<li class='input_Type'";
				} else {
					ul += "<li ";
				}
				ul += " id="+ filedValue +" style='list-style-type:none;' οnmοuseοver='typeInput.changeCss(this)' οnclick='fillTypeInputText(this)'>"+ name +"</li>";
			}
		}
		ul += "</ul>";
		return ul;
	},
	//设置DIV座标
	setDivPosition : function(typeInput) {
		var assistHiddenDiv = document.getElementById("typeNameDiv");
		// 得到文本框的高度、宽度、左边距
		var offsetLeft = typeInput.getBoundingClientRect().left
				+ document.documentElement.scrollLeft;
		var offsetTop = typeInput.getBoundingClientRect().top
				+ document.documentElement.scrollTop + 10;
		var offsetWidth = typeInput.offsetWidth;
		// 设置div的属性
		assistHiddenDiv.style.width = offsetWidth;
		assistHiddenDiv.style.left = offsetLeft-2;
		assistHiddenDiv.style.top = offsetTop;
	},
	//设置文本框的值
	fillTypeInputText : function(typeInputText, obj) {
		var typeInput = document.getElementById(typeInputText);
		typeInput.value = obj.innerText;
		typeNameDiv.style.display = "none";
	},
	//鼠标 移动时改变li 的CSS
	changeCss : function(obj) {
		var assistHiddenDiv = document.getElementById("typeNameDiv")
				.getElementsByTagName("li");
		var length = assistHiddenDiv.length;
		$("#ul_background li").removeClass();
		$(obj).addClass("input_Type");
	}
}
 
function getTypeName(input, url) {
	var inputObj = new typeInput.init(input, url);
}

$(document).ready(function(){
  $("#typeName").blur(function(){
  	if(!flag){
  		$("#ul_background").remove();
	    $("#typeNameDiv").css("display","none");
	}
  });
  $("#typeNameDiv").mouseout(function(){
  		flag = false;
  		$("#typeName").focus();
  });
  $("#typeNameDiv").mouseover(function(){
  		flag = true;
  });
  $("#typeName").click(function(){
  	if($("#typeName").val()==""){
  		typeInput.findTypesByAjax(this, "tcsQsAjax.do");
  	}
  });
 
});

function fillTypeInputText(obj){
	$("#typeName").val(obj.innerText);
	$("#typeNameDiv").innerText = "";
	$("#typeNameDiv").css("display","none");
}

</script>

再贴struts-config.xml：

<action path="/qs/tcsQsAjax"
        type="com.baosight.baosteel.bsi.cs.qs.struts.action.QuestionsAjaxAction"
        scope="request" parameter="method"
        validate="false"/>

再贴Action：再贴Action：再贴Action：

public class QuestionsAjaxAction extends BaseAction{

	public ActionForward getTypesByName(BActionContext context) throws Exception {
		HttpServletRequest request = context.getRequest();
		HttpServletResponse response = context.getResponse();
		String stringValue = request.getParameter("str");
		IQuestionsBankManageService service = (IQuestionsBankManageService) context.findService(
				"questionsService", IQuestionsBankManageService.class);
		List list = service.queryQsTypesByAjax(stringValue);
		List result = null;
		for (Iterator iterator = list.iterator(); iterator.hasNext();) {
			QuestionTypeModel type = (QuestionTypeModel) iterator.next();
			QsType obj = new QsType(type.getId(), type.getQuestionTypeName());
			if(result == null){
				result = new ArrayList();
			}
			result.add(obj);
		}
		JSONArray jsonary = JSONArray.fromObject(result);
		try {
			request.setCharacterEncoding("gbk");
			response.setContentType("text/xml;charset=gbk");
		} catch (UnsupportedEncodingException el) {
			el.printStackTrace();
		}
		PrintWriter out;
		try {
			out = response.getWriter();
			out.write(jsonary.toString());
			out.flush();
			out.close();

		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
}

里面有用到jquery，所以要注意在jsp中引入它OK，完了里面有用到jquery，所以要注意在jsp中引入它

OK，完了