ajax 文本框提示

先贴效果图吧：

                                      

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

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

先贴HTML:

<td width="50%">

    <html:text property="questionTypeName" styleId="typeName" onkeyup="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) {//支持firefoxvar 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]);}},//设置ULsetUl : 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;' onmouseover='typeInput.changeCss(this)' onclick='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 的CSSchangeCss : 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，完了