---------------code.jsp------------------
<%@include file="/internet/common.jsp"%>
<link rel="stylesheet" href="/pageComponent/resources/theme/style.css" target="_blank" rel="external nofollow" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
?<!--
?.style1 {
??color: #FF0000
?}
?
?.mouseOut {
??font-size: 12px;
??background: #708090;
??color: #FFFAFA;
?}
?
?.mouseOver {
??font-size: 12px;
??background: #FFFAFA;
??color: #000000;
?}
?-->
?</style>
<script type="text/javascript" language="javascript">
??var xmlHttp;
??????? var completeDiv;
??????? var inputField;
??????? var nameTable;
??????? var nameTableBody;
??????? var flag=false;
??????? function createXMLHttpRequest() {
??????????? if (window.ActiveXObject) {
??????????????? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
??????????? }
??????????? else if (window.XMLHttpRequest) {
??????????????? xmlHttp = new XMLHttpRequest();???????????????
??????????? }
??????? }
???????
??????? function setflag(){
??????????? flag = true;
??????? }
???????
??????? function DisSelect()
??????? {
??????????? if(flag==false)
??????????? document.getElementById("popup").style.display="none";
??????? }
??????? function initVars() {
??????????? inputField = document.getElementById("frmchangshang");???????????
??????????? nameTable = document.getElementById("name_table");
??????????? completeDiv = document.getElementById("popup");
??????????? nameTableBody = document.getElementById("name_table_body");
??????????? document.getElementById("popup").style.display="block";
??????? }
??????? function findNames() {
??????????? initVars();
??????????? if (inputField.value.length > 0)
??? {
??????????????? createXMLHttpRequest();
??????????????? var url = "search.jsp?names=" + inputField.value;?? //?ヨ?㈡?版??椤甸????????????????? xmlHttp.open("GET", url, true);
??????????????? xmlHttp.onreadystatechange = callback;
??????????????? xmlHttp.send(null);
??????????? }
??? else
?? {
??????????????? clearNames();
??????????? }
??????? }
??????? function callback() {
??????????? if (xmlHttp.readyState == 4) {
??????????? ?alert(xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data);
??????????????? if (xmlHttp.status == 200)
??????????????? {
???? try
??????????????????? {
??????????????????????? var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
??????????????????? }
??????????????????? catch(e)
??????????????????? {
??????????????????????? document.getElementById("popup").style.display="none";
??????????????????????? clearNames();
??????????????????? }
??????????????????? setNames(xmlHttp.responseXML.getElementsByTagName("content"));
??????????????? }
??????????????? else if (xmlHttp.status == 204)
??????????????? {
??????????????????? clearNames();
??????????????? }
??????????? }
??????? }
???????
??????? function setNames(the_names) {???????????
??????????? clearNames();
??????????? var size = the_names.length;
??????????? setOffsets();
??????????? var row,cell,spans;
??????????? for (var i = 0; i < size; i++) {
??????????????? //var nextNode = the_names[i].firstChild.data;
??? var e = the_names[i];
??? //??寰?瀛????瑰??瀹癸????拌?杞戒負?扮?
??? var nextNode=e.getElementsByTagName("name")[0].firstChild.data;
??? //??寤?r锛?td锛?span??绱?
??????????????? row? =document.createElement("tr");
??????????????? cell =document.createElement("td");
??? //spans=document.createElement("span");
??? //璁劇疆cell灞?????????????????? cell.onmouseout = function() {this.className='mouseOver'; flag=false;};
??????????????? cell.onmouseover = function() {this.className='mouseOut'; flag=true;};
??????????????? cell.setAttribute("bgcolor","#FFFAFA");
??????????????? cell.setAttribute("border","0");
??????????????? //cell.setAttribute("onmouseover","setflag()");
??????????????? cell.onclick = function() { populateName(this); };
??? //灏?nextNode娣誨????d
??? var txtName = document.createTextNode(nextNode);
??? cell.appendChild(txtName);
??? //瑁?杞介?????版????pan??绱?
??? row.appendChild(cell);
??????????????? nameTableBody.appendChild(row);
??????????? }
??????? }
??????? 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 + "px";
??????????? completeDiv.style.top = top + "px";
??????????? nameTable.style.width="400px";
??????? }
???????
??????? 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 populateName(cell) {
??? //濉????版????eb椤甸???cell---->td瀵矽薄
??????????? inputField.value = cell.firstChild.nodeValue;
??????????? clearNames();
??????? }
??????? //娓??ゅ??琛ㄦ?扮?
??????? function clearNames() {
??????????? var ind = nameTableBody.childNodes.length;
??????????? for (var i = ind - 1; i >= 0 ; i--) {
???????????????? nameTableBody.removeChild(nameTableBody.childNodes[i]);
??????????? }
??????????? completeDiv.style.border = "none";
??????? }</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<input name="frmchangshang" class="InputText" id="frmchangshang" style="width:250px;" 慰nblur="DisSelect();" 慰nkeyup="findNames();" size="50" maxlength="100" />
<span class="style1">??绀猴?杈??ュ?抽??瀛?锛?绋?搴????ㄤ?搴?涓??歸???ㄨ??劇??璁闆?锛?濡???涓?瀛??ㄨ??琛?濉??? </span>
<div style="position:absolute;top:0;left:0;" id="popup">
<table id="name_table" bgcolor="#FFFAFA" cellspacing="0" cellpadding="0">
?<tbody id="name_table_body"></tbody>
</table>
</div>
</body>
</html>
---------------search.jsp------------------
<%@page import="com.primeton.eos.access.*,java.sql.*"%>
<%
Connection conn = null;
ResultSet rs = null;
PreparedStatement stmt = null;
String keyword=request.getParameter("names");
if(keyword==null){
?keyword="";
}
String sql="select yr,bmmc from a_bm where yr like '%"+keyword+"%'";
System.out.println(sql);
response.setContentType("text/xml");
out.write("<?xml version="+"1.0"+" encoding="+"GB2312"+" ?>");
out.write("<response>");
out.write("<content>");
try {
?conn = DBConn.getConnection("c://test.mdb");
?stmt = conn.prepareStatement(sql);
?rs = stmt.executeQuery();
?while(rs.next()){
??System.out.println(rs.getString("bmmc"));
??out.write("<name>"+rs.getString("yr")+"</name>");
?}
}catch(Exception e){
?e.printStackTrace();?
}finally{
?DBConn.close(rs,stmt,conn);
}
out.write("</content>");
out.write("</response>");
%>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)