基于ajax的简单搜索实现方法

本文实例讲述了基于ajax的简单搜索实现方法。，具体如下：

这里使用两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据，后一个用来对搜索关键字进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：

testJs.js

// 此函数等价于document.getElementById /document.allfunction $(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();} //填写输入框