这篇文章主要介绍了基于ajax的简单搜索实现方法,结合实例形式较为详细的分析了ajax调用实现搜索功能的具体步骤与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了基于ajax的简单搜索实现方法。分享给大家供大家参考，具体如下：
这里使用两个.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 = 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中已有的的表格数据 } //用来设置当鼠标失去焦点后文本框的隐藏 docume<div style="color:transparent">来源gaodai.ma#com搞#代!码网</div>nt.onmousedown = function() { if (!event.srcElement.pop) clearNames(); } //填写输入框
Default.aspx：
<title>Ajax Search</title> 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; } <div id="popup"> <table id="suggestTb" cellspacing="0" cellpadding="0" bgcolor="#fffafa" border="0"> <tbody id="suggestBody"> </tbody></table></div>
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：
代码如下:
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程序设计有所帮助。
以上就是基于ajax的简单搜索实现方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于ajax的简单搜索实现方法
转载请注明原文链接：基于ajax的简单搜索实现方法
