这里使用两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据，后一个用来对搜索关键字进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：
testJs.js
// 此函数等价于document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // 创建 XMLHttpRequest对象，以发送ajax请求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } function addAjaxSearch() { inputField = $("txtSearch"); completeTable = $("suggestTb"); completeDiv = $("popup"); completeBody = $("suggestBody"); var tempStr = inputField.value; // alert(tempStr); var keyWord = encodeURI(tempStr); if (tempStr == "") return; var xmlReq = createXMLHTTP(); xmlReq.open("post", "AjaxOperations.aspx?searchKeyword=" + keyWord, true); xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { //xmlReq.responseText为输出的那段字符串 setNames(xmlReq.responseText); } else { alert("Connect the server failed!"); } } } xmlReq.send(null); } // 设置div中的表格数据 function setNames(names) { if (names == "") { clearNames(); return; } clearNames(); // 清空div中已有的的表格数据 setOffsets(); // 设置div到合适的位置 var row, cell, txtNode; var s = names.split("#"); for (var i = 0; i < s.length; i++) { // 显示类似search下拉选择项 var nextNode = s[i]; row = document.createElement("tr"); cell = document.createElement("td"); cell.onmouseout = function() { this.style.backgroundColor = ''; }; cell.onmouseover = function() { this.style.backgroundColor = '#E8F2FE'; }; cell.onclick = function() { completeField(this); }; // 搜索框设置为选择的数据 cell.pop = "T"; txtNode = document.createTextNode(nextNode); cell.appendChild(txtNode); row.appendChild(cell); $("suggestBody").appendChild(row); } } // 清空div中已有的的表格数据 function clearNames() { completeBody = $("suggestBody"); var ind = completeBody.childNodes.length; for (var i = ind - 1; i >= 0; i--) { completeBody.removeChild(completeBody.childNodes[i]); } completeDiv = $("popup"); completeDiv.style.border = "none"; } // 设置div到合适的位置 function setOffsets() { completeTable.style.width = inputField.offsetWidth; +"px"; var left = calculateOffset(inputField, "offsetLeft"); var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px"; } function calculateOffset(field, attr) { var offset = 0; while (field) { offset += field[attr]; field = field.offsetParent; } return offset; } // 搜索框设置为选择的数据 function completeField(cell) { inputField.value = cell.firstChild.nodeValue; // 搜索框设置为选择的数据 clearNames(); //清空div中已有的的表格数据 } //用来设置当鼠标失去焦点后文本框的隐藏 document.onmousedown = function() { if (!event.srcElement.pop) clearNames(); } //填写输入框
Default.aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebTest2008.Default" %> <!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"> <head runat="server"> <title>Ajax Search</title> <script src="https://www.jb51.net/js/testJs.js" type="text/javascript"></script> <style type="text/css" media="screen"> body { font: 11px arial; } .suggest_link { background-color: #FFFFFF; padding: 2px 0px 2px 0px; border:solid 1px #cceeff; } .suggest_link_over { background-color: #E8F2FE; padding: 2px 0px 2px 0px; } #search_suggest { position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #000000; } </style> </head> <body> <input type="text" onkeyup="addAjaxSearch();" maxlength="200" /> <input type="submit" value="Search" title="Run Search" /> <div> <table cellspacing="0" cellpadding="0" bgcolor="#fffafa"> <tbody> </tbody> </table> </div> </body> </html>
Default.aspx.cs：