ajax如何实现简单搜索方法

2024-09-01 08:30:32

字体：大中小

来源：转载

供稿：网友

本文内容将为大家介绍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();} //填写输入框

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" /> <div id="popup" style="position: absolute">  <table id="suggestTb" cellspacing="0" cellpadding="0" bgcolor="#fffafa" border="0">   <tbody id="suggestBody">   </tbody>  </table> </div></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[] { '#' }));    }  } }}

上面的代码我都已经测试通过，复制粘贴运行试试看吧。

刚看到一篇文章里说，“实时搜索带来的痛苦要远大于他带来的帮助。这就是为什么Google Suggest还处于beta测试而并没有放在主页上的原因。在Start.com Live.com上搜索的时候你是不能使用返回按钮来查看上一次搜索或返回上一页的。或许还没有人来完成这项工作，但是完成这个工作应该是很困难的至少是不太明知的或者会因此带来更多的麻烦。（译注：现在已经有很多开源的框架可以实现历史记录功能）”。其实ajax实时搜索还是很有吸引力的，现在的很多网站都有这个功能。学习一下还是很有意义的。

以上就是小编为大家介绍ajax如何实现简单搜索方法的内容，要是你还有其他更好方法的话，恳请不断补充完善！

上一篇：如何实现ASP.NET与Ajax

下一篇：Ajax jsonp如何实现跨域请求