时间：2021-07-01 10:21:17 帮助过：13人阅读
本文实例讲述了基于ajax的简单搜索实现方法。分享给大家供大家参考，具体如下：
这里使用两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据，后一个用来对搜索关键字进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：
testJs.js
输出的那段字符串 setNames(xmlReq.responseText); } else { alert("Connect the server failed!"); } } } xmlReq.send(null); } // 设置p中的表格数据 function setNames(names) { if (names == "") { clearNames(); return; } clearNames(); // 清空p中已有的的表格数据 setOffsets(); // 设置p到合适的位置 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); } } // 清空p中已有的的表格数据 function clearNames() { completeBody = $("suggestBody"); var ind = completeBody.childNodes.length; for (var i = ind - 1; i >= 0; i--) { completeBody.removeChild(completeBody.childNodes[i]); } completep = $("popup"); completep.style.border = "none"; } // 设置p到合适的位置 function setOffsets() { completeTable.style.width = inputField.offsetWidth; +"px"; var left = calculateOffset(inputField, "offsetLeft"); var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight; completep.style.border = "black 1px solid"; completep.style.left = left + "px"; completep.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(); //清空p中已有的的表格数据 } //用来设置当鼠标失去焦点后文本框的隐藏 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 id="Head1" runat="server">
<title>Ajax Search</title>
<script src="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 name="txtSearch" id="txtSearch" type="text" class="suggest_link" onkeyup="addAjaxSearch();" maxlength="200" style="width: 200px" />
<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" title="Run Search" />
<p id="popup" style="position: absolute">
<table id="suggestTb" cellspacing="0" cellpadding="0" bgcolor="#fffafa" border="0">
<tbody id="suggestBody">
</tbody>
</table>
</p>
</body>
</html>Default.aspx.cs：
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}AjaxOperations.aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>
AjaxOperations.aspx.cs：
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
public partial class AjaxOperations : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["searchKeyword"]))
{
string tempStr = Request["searchKeyword"];
/* 测试用 实际项目中可以对数据库进行检索等等相关操作，这里简化了 */
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(tempStr + " #");
sb.Append("#");
sb.Append(tempStr += " " + tempStr);
sb.Append("#");
sb.Append(tempStr += " " + tempStr);
Response.Write(sb.ToString().TrimEnd(new char[] { '#' }));
}
}
}
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Ajax异步提交数据返回值的换行问题实例分析
SSH网上商城之使用ajax完成用户名是否存在异步校验
ajax请求之返回数据的顺序问题分析
以上就是基于ajax的简单搜索实现方法的详细内容，更多请关注Gxl网其它相关文章！