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

来源：皓特汽车网

这篇文章主要介绍了基于ajax的简单搜索实现方法,结合实例形式较为详细的分析了ajax调用实现搜索功能的具体步骤与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了基于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请求之返回数据的顺序问题分析