Ajax的弹出式窗口实现

为了完成根据输入内容动态弹出下拉窗口的实现,采用Ajax来实现.

javascript代码如下,需要导入prototype.js:

	var inputField;
	var nameTable;
	var completeDiv;
	var nameTableBody;

	function initVars()
	{
		inputField = $("principalName");  //这里就是所要输入的文本框
		nameTable = $("name_table");   
		completeDiv = $("popup");
		nameTableBody = $("name_table_body");
	}

	function findPrincipals(url, evt)   //这个就是事件的起点
	{
		evt = evt?evt:(window.event?window.event:null);

		if (!checkKeyCode(evt.keyCode)) {

			initVars();

			var pars = "parameter=" + inputField.value;
			var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onFailure: reportError, onComplete: showResponse});

		}
	}

	function reportError(request)
	{

	}

	function showResponse(request)
	{
		var content = request.responseXML;
		try {
			setNames(content.getElementsByTagName("principal"));				
		} catch(e) {

		}
	}

	function setNames(the_names) 
	{
		clearNames();
		var size = the_names.length;
		if (size > 0)
		{
			setOffsets();  //这个方法设置弹出窗口的具体位置.

			var row, cell, txtNode;

			for (var i=0; i<size; i++)
			{
				var nextNode = the_names[i].firstChild.data;
				var principalOid = the_names[i].getAttribute("oid");
				row = document.createElement("tr");
				cell = document.createElement("td");

				cell.onmouseout = function() {this.className="mouseOver";};
				cell.onmouseover = function() {this.className="mouseOut";};
				cell.setAttribute("align", "left");
				cell.setAttribute("border", 0);
				cell.setAttribute("oid",principalOid);
				cell.onclick = function() {populateName(this);};

				row.setAttribute("height", "20px");

				txtNode = document.createTextNode(nextNode);
				cell.appendChild(txtNode);
				row.appendChild(cell);
				nameTableBody.appendChild(row);
			}
		}
	}

	function clearNames()
	{
		var ind = nameTableBody.childNodes.length;
		for (var i=ind - 1; i>=0; i--) 
		{
			nameTableBody.removeChild(nameTableBody.childNodes[i]);
		}
		completeDiv.style.border = "none";
	}

	function populateName(cell) 
	{

		inputField.value=cell.firstChild.nodeValue;
		$("principalOid").value=cell.getAttribute("oid");
		clearNames();
	}

	function setOffsets() 
	{
		var end = inputField.offsetWidth;
		var left = calculateOffsetLeft(inputField);
		var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

		completeDiv.style.border = "black 1px solid";
		completeDiv.style.left = left - 105 + "px";
		completeDiv.style.top = top + 10 + "px";
		nameTable.style.width = end - 10 + "px"
	}

	function calculateOffsetLeft(field)
	{
		return calculateOffset(field, "offsetLeft");
	}

	function calculateOffsetTop(field)
	{
		return calculateOffset(field, "offsetTop");
	}

	function calculateOffset(field, attr)
	{
		var offset = 0;
		while(field)
		{
			offset += field[attr];
			field = field.offsetParent;
		}

		return offset;
	}

	function checkKeyCode(_keyCode)
	{
	    if (_keyCode == 12 || _keyCode == 13) return true;
	    if (_keyCode >= 16 && _keyCode <= 20) return true;
	    if (_keyCode == 27) return true;
	    if (_keyCode >= 32 && _keyCode <= 45) return true;
	    if (_keyCode == 47) return true;
	    if (_keyCode >= 91 && _keyCode <= 93) return true;
	    if (_keyCode >=112 && _keyCode <=127) return true;
	    if (_keyCode ==144 || _keyCode ==145) return true;
	    if (_keyCode == 255) return true;
	}

	function mdown(evt)  //这个方法用在最大层的onmousedown()事件, 目的是当鼠标点击别处时关闭下拉窗口
	{
		evt = evt?evt:(window.event?window.event:null);

		if (window.event)
		{
			if (evt.srcElement.id == 'principalName') return;

			try
			{
				for (var obj=evt.srcElement; obj.tagName != "DIV"; obj=obj.parentElement){}
			}
			catch(e){}
		}
		else
		{
			if (evt.target.id == 'principalName') return;

			try
			{
				for (var obj=evt.target; obj.tagName != "DIV"; obj=obj.parentNode){}
			}
			catch(e){}
		}

		try
		{
			if (obj.id != 'popup') clearNames();
		}
		catch(e){}
	}

对应的jsp代码,这里只贴出部分的:

<div class="input-div" onmousedown="mdown(event);"> //最外层的mdown

<s:textfield name="priceTable.principalName" id="principalName" size="30" maxlength="30" onkeyup="findPrincipals('findPrincipals.action',event);" /> //具体的文本框,这里我用的是struts2做的.

<div id="popup" style="position: absolute;">
	<table id="name_table" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0"/>
   			<tbody id="name_table_body"></tbody>
   	</table>
</div> //这个就是显示出来的下拉窗口. 配合前面的JS就可以达到下拉窗口的实现.

下面是用到的两个样式:
.mouseOut
{
background:#426FD9;
color:#FFF;
}

.moustOver
{
background:#FFFFFF;
}

再下来是对应的action中的代码:

public String findPrincipals() {
        try {
            String parameter = this.getRequest().getParameter("parameter").trim();

            PrincipalHolder principal = new PrincipalHolder();
            principal.setPrincipalCode(parameter);
            principal.setPrincipalName(parameter);
            principal.setIsActive(VALUE_YES);

            List<PrincipalHolder> principals = principalService_.findPrincipals(principal);

            HttpServletResponse response = ServletActionContext.getResponse();

            if (principals != null && principals.size() > 0) {

                PrintWriter out = response.getWriter();

                response.setContentType("text/xml");
                response.setHeader("Cache-Control", "No-cache");

                out.println("<response>");
                for (int i=0; i<principals.size(); i++) {
                    principal = principals.get(i);
                    out.println("<principal oid='" + principal.getPrincipalOid() + "'>" + principal.getPrincipalName().trim() 
                                + " -- " + principal.getPrincipalCode().trim() + "</principal>");
                }
                out.println("</response>");

                out.close();
            } else {
                response.setStatus(HttpServletResponse.SC_NO_CONTENT);
            }
        } catch (Exception e) {
            log.error("findPrincipals : ");
            log.error("Error occured on find principal list ", e);
            this.ticket = String.valueOf(DateUtil.getCurrentTimeStamp());
            ErrorMsgHelper.logError(log, ticket, this.toString(), e);
        }

        return null;
    }

里面有些内容是我具体项目中的,如果要用需要做相应的修改,包括js.