ASP.NET用Ajax实现搜索提示功能

在正常的软件开发中，经常会遇到信息搜索，添加搜索关键词提示是提升用户体验的好方法。今天，我将介绍如何使用AJAX在ASP.NET实现搜索的信息提示！1.需要了解一些知识点。

(1)为1)AJAX对象创建不同的浏览器。

不同的浏览器有不同的AJAX(XMLHttpRequest)对象实现。例如，IE浏览器通过ActiveX控件实现AJAX对象。其他浏览器，如Firefox，已经将AJAX对象实现为一个名为XMLHttpRequest的内部对象，因此不同的浏览器有不同的创建AJAX对象的方式。让我们看看在不同浏览器之间创建AJAX对象的方法：

在IE浏览器下，创建：

//IE浏览器尝试{//IE 5.0 http request=new ActiveX object(' MSXML 2 . xmlhttp ')；} catch (e) {try {//ie版本高于5.5 http request=new ActiveX object(' Microsoft . xmlhttp ')；在Firefox浏览器下创建{ catch(e)}:

//火狐、Safari等浏览器http request=new XMLHttpRequest()；多浏览器AJAX对象创建功能：

函数createAjaxObj(){ var Httprequest=false；//判断是否包含XMLHttpRequest对象PS:将来可能会继承次要对象if (window.xmlhttprequest)。{//火狐、Safari等浏览器http request=new XMLHttpRequest()；if(Httprequest . overridemimetype)Httprequest . overridemimetype(' text/XML ')；}//判断是否支持Active control对象else if(window . ActiveX object){//ie浏览器try {//ie 5.0 http request=new ActiveX object(' MSXML 2 . xmlhttp ')；} catch (e) {try {//ie高于5.5 http request=new ActiveX object(' Microsoft . xmlhttp ')；} catch (e) {}}} //返回创建的AJAX对象返回httpRequest}(2)在不同浏览器中改变文本框内容事件的使用。

目前还没有改变文本框内容事件的标准版本。目前我们只关心IE和火狐，那么在IE和火狐下如何表达这两个时代呢？

IE: onpropertychange

FireFox: oninput

页面加载时如何根据浏览器将相应的更改事件附加到文本框？

1.1。JS判断浏览器版本？

//IE浏览器if(navigator . user agent . index of(' msie ')0){ }//Firefox浏览器if(is irfox=navigator . user agent . index of(' Firefox ')0){ } 2。根据浏览器版本将相应的事件附加到文本框。

函数getOs() {//确定浏览器类型if (navigator。用户代理。index of(' MSie ')0){//此时，假设文本框id为' Txt search '//attached event document . getelementbyid(' Txt search ')。将ie支持的事件(' onpropertychange '，search)附加到文本框。OsTyep=' MSIE} else if(navigator . user agent . index of(' Firefox ')0){//此时，假设文本框id为' TxTsearch '//attach event document . getelementbyid(' TxTsearch ')。将Firefox支持的addeventlistener ('input '，search，false)添加到文本框中；OsTyep=' Firefox}}3.根据浏览器版本清除文本框的相应事件。

Clearos () {if (navigator。用户代理。index of(' MSie ')0){//此时，假设文本框id为' txtSearch' //这是事件文档. getelementbyid ('txtsearch ')。文本框清除ie支持detach event(' on property change '，search)；OsTyep=' MSIE} else if(navigator . user agent . indexof(' Firefox ')0){//此时，假设文本框id为' TxTsearch '//clear event document . getelementbyid(' TxTsearch ')。Firefox支持文本框的removeeventlistener ('input '，search，false)；OsTyep=' Firefox}}

第二，客户端的设计。

(1)实现过程的分析。

了解以上知识点后，让我们来看看实现搜索提示的整体流程：

1)首先，客户端通过文本框输入事件捕捉输入的关键词。

2)通过我们之前创建的AJAX对象提交给服务器。

3)服务器接受提交的关键词，查询并将结果集返回给客户端显示。

流程如下：

(2)写作风格。

那么接下来我们来看一下样式，其中包括当文本框鼠标移动上去给边框加颜色与搜索结果行选中的样式等，这里就不细说了，列举出来供参考：

style type=' text/CSS ' media=' screen ' body { font :11 px arial；} /*设置提示提示列表上的样式表*/.search _ link {底色： # FFFFFF光标：指针；线高：24 px文本-缩进：6像素；} /*设置当鼠标移动到提示列表上的样式表*/.search _ link _ over {底色： # E8F2fe光标：指针；线高：24 px文本-缩进：6像素；} /*设置显示搜索提示差异的样式表*/# search _ div { position :绝对值；背景-color : # FFFFFF；向左文本对齐：border:1px固体# 000000;边框-顶部：0像素；display:none最小宽度宽度：553px宽度宽度：553px} /*文本框样式*/.mainInput {行高： 26px高度： 28px宽度： 550像素；font-size : 16px字体系列： '微软雅黑', '宋体，坎达拉；字体粗细：正常；color : # 666 margin : auto order :无；文本-缩进： 8px} /*鼠标放上文本框样式*/.mainInputOver { width:552px高度：30 px边框-顶部-宽度： 1px边框-右侧-宽度： 1px边框-底部-宽度： 1px边框-左侧-宽度： 1px边框-顶部-样式：实心；边框-右侧-style:实心；边框-底部-样式：实心；边框-左侧-style:实心；边框-顶部-颜色： # b7b 7；边框-右侧-颜色： # d0d 0；边框-底部-颜色： # d0d 0；边框-左侧-颜色： # d0d 0；}/*鼠标离开文本框样式*/.mainInputFocus { width :552 px；高度：30 pxborder: 1px固体# 41b 5 F2；}/*点击文本框样式*/.我的边框{ width:552px高度：30 px边框-top: 1px固体# CCCCCC；边框-bottom: 1px实心# DDDDDD边框-左： 1px实心# ddddborder-right : 1px实心# DDDDDD} /style(3)aspx页面与ajax_search.js文件的编写

接下来就是一个比较重要的环节了，aspx页面与ajax_search.js文件中包含了整体包括显示与请求的方法例如：

1.页面的实现

加载时的正文=' getOs()' onkeydown=' if(事件。键码==13)返回false ' form id=' form 1 ' runat=' server ' div class=' my border ' on mouse over=' this。class name=' mainInput to ver ' ' on mouse out=' this。类名='我的边框' '点击='这个。class name=' mainInputFocus ' ' input type=' text ' id=' txt search ' name=' txt search ' on bulr=' HiddenDiv()' alt=' searccriteria ' autocomplete=' off ' class=' mainInput '/div！-该差异作为现实搜索提示的结果-div id=' search _ div ' style=' margin-top :0 px '/div/div/form/body 2 .根据浏览器创建创建交互式、快速动态网页应用的网页开发技术对象

var search req=createAjaxObj()；var OsTyep=函数getOs() { //判断浏览器类型if(导航器。用户代理。索引为(' MSIE ')0){文档。getelementbyid(' txtSearch ').attachEvent(' onpropertytchange '，search)；OsTyep=' MSIE} else if(导航器。userAGENT。indexof(' Firefox ')0){ document。GetElementByID(' TxtSearch ').addEventListener('input '，search，false)；OsTyep=' Firefox} }函数ClearOS(){ if(navigator。用户代理。索引为(' MSIE ')0){文档。getelementbyid(' txtSearch ').disconnectEvent('在属性更改时'，搜索)；OsTyep=' MSIE} else if(导航器。userAGENT。indexof(' Firefox ')0){ document。GetElementByID(' TxtSearch ').removeEventListener('input '，search，false)；OsTyep=' Firefox} }函数createAjaxobj(){ var Httprequest=false；//判断是否包含XMLHttpRequest对象PS:将来工业管理学(工业工程)高也有可能继承次对象如果(窗口. XMLHttpRequest) { //火狐，Safari等浏览器http请求=new XMlhttprequest()；if(Httprequest。override metype)Httprequest。override metype(' text/XML ')；//ie :关于属性更改//ff :关于输入}//判断是否支持活跃的控件对象否则如果(窗口. ActiveXObject) { //IE浏览器请尝试{//IE5.0 Httprequest=new ActiveX对象(' Msxml 2 .XMLHTTP’)；} catch (e) { try { //IE5.5以上http请求=新的ActiveX对象('微软.XMLHTTP’)；} catch (e) { } } } //返回创建好的创建交互式、快速动态网页应用的网页开发技术对象返回httpRequest}3。创建请求与返回数据的显示

//异步请求服务器获取搜索结果函数search(){ if(搜索请求。readystate==4 | |搜索请求。readystate==0){//获得文本框中的值var valStr=escape(文档。getelementbyid(' txtSearch ').值);//建立连接searchReq.open('GET '，encodeURI('Search.ashx？search=' valStr ' fresh=' math。random())，true)；//当请求状态改变时调用handleSearch方法搜索请求。onreadystatechange=handleSearch；搜索请求。发送(null)；}}//返回结果处理方法函数handleSearch(){ if(搜索请求。readystate==4){//获得搜索提示结果的元素DIV var搜索DIV=文档。getelementbyid(' search _ DIV ')；searchDIV.innerHTML=//用^将返回的文本数据分割成数组var resultstrarr=searchreq.responsetext.split('^')；//循环构建超文本标记语言代码for(var I=0；我结果了。长度-1；I){ var html str=' div onmouseover=' selectOverDiv(this，' I ')；' ';html str=' onmouseout=' selectoutiv(this，' I ')；' ';html str=' onclick=' setSearch(这。innerHTMl)；' ';html STr=' class=' search _ link ' style=' display :块；宽度：100%;“结果trarr[I]”/div；搜索区。innerHTMl=HTMl字符串；} ShowDiv()；x=-1；}}4.将数据选中数据显示文本框中

上边代码中在循环构建超文本标记语言代码时，我们给构建的差异加入了三个事件分别是：

鼠标悬停时为1=“select overdiv(这是“I”)；”

当鼠标放上去时调用selectOverDiv函数传递自己进去

2 on mouseout=' selectoutiv(this，' I ')；'

当鼠标放上去时调用选择升级函数传递自己进去

3 onclick=' setSearch(这。' inner html)；'

当鼠标点击差异时调用setSearch函数传入本身差异中内容

那么还是来看下这几个方法的实现吧：

函数选择OverDiv(div_value，I){ div _ value。类名=' search _ link _ overvar my _ div=文档。getelementbyid(' search _ div ').getElementsByTagName(' div ')var _ num=my _ div。长度；for(var k=0；k the _ numk){ SelectOut(my _ div[k])；if(k==I){ selectOver(my _ div[k])} } isCheckDiv=true；x=I；} function selectOutDiv(div _ value，I){ isCheckDiv=false；div _ value。类名=' search _ linkx=I；}函数setSearch(值){ //清空文本框的内容改变事件是因为我们给选中值复制时该事件会触发//所以先清空次事件ClearOS()；文件。getelementbyid(' TxTsearch ').值=值；//设置该属性为错误的在调用HiddenDiv函数会隐藏提示结果DIV isCheckDiv=false hiddendiv()；//在赋值完成后再次附加修改时间getOs()；}函数ShowDiv(){ var content=document。getelementbyid(' TxTsearch ').价值；var div conten=文档。getelementbyid(' search _ div ').innerHTML如果（内容！='' divConten！=' '){文档。getelementbyid(' search _ div ')。风格。display=' block ' } else { isCheckDiv=false；HiddenDiv()；} }函数HiddenDiv(){ if(isCheckDiv==false){ document。getelementbyid(' search _ div ')。风格。显示='无'；文件。getelementbyid(' search _ div ').innerHTML=}}5。增加键盘上下键选中提示数据与回车键选中数据到文本框

定义变量索引=-1;//表示当前选中的行索引函数KeyDown(){ var value=event。KeyCode//向上38,向下40,回车13 var _ key=事件。密钥代码/判断提示差异是否是现实状态if(文档。getelementbyid(' search _ div ')。风格。展示！='none') { //获取里面所用行var my _ div=文档。getelementbyid(' search _ div ').getElementsByTagName(' div ')var _ num=my _ div。长度；开关(the_key) { case 40: //向下//判断指数是否已经到最下面if(index==the _ num-1){ index=0；} else { index} //清楚所有选中for(var I=0；_ NuMi){ select out(my _ div[I])；} //根据指数选中对应索引行for(I=0；_ NuMi){ if(I==index){ selectOver(my _ div[I])} } break；案例38: //向上//判断指数是否已经到最上面if(index==0){ index=the _ num-1；} else { index-；} //清楚所有选中for(var I=0；_ NuMi){ select out(my _ div[I])；} //根据指数选中对应索引行for(I=0；_ NuMi){ if(I==index){ selectOver(my _ div[I])} } break；第13: //回车//将选中的内容放入文本框中if (my_div[index]).innerHTML！=null) { setSearch(my_div[index]).innerHTML)；} break } } } document . onkeydown=Keydown 3。服务器端的设计

(1)实现一个虚拟的数据源

前台传来关键字，后台必须要有数据匹配，为了简单我就不建立数据库了我就模拟一个数据源好啦！

步骤：右键项目-添加新项-选择一般处理程序命名为：Search.ashx编写代码如下：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统。数据；使用系统数据。SqlClient使用系统。文字；使用系统CodeDom .使用系统。全球化；使用系统组件模型.使用系统。收藏品；公共类搜索： IHttpHandler { //定义一个数据源公共列表字符串数据源{ get {列表字符串列表=新列表字符串(){ '我爱C# '，'我爱. NET '，'我爱微软技术' };退货清单；} }公共void进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；} public bool IsReuse { get { return false；} }} (2)搜索数据源返回固定格式数据以字符串形式

然后，我们将搜索数据源添加到ProcessReques方法中，构建并返回相应的数据集，并拼接结果字符串并将其返回给客户端。代码如下：

public void process request(HttpContext上下文){ context。响应。内容类型='文本/纯文本'；//接受客户端关键字并解码字符串search str=http putity . URL decode(context . request . query string[' search ']。tostring()，system . text . encoding . utf8)；//搜索匹配的关键字var result=(从数据源中的字符串n开始，其中n .包含(searchstr) select n)。数据源集合中的toliststring()；StringBuilder sb=new StringBuilder(100)；//将匹配的关键字拆分并拼接成一个字符串foreach(结果中的字符串字符串为liststring) {sb。append format(“{ 0 }”，字符串)；}//返回client context . response . write(sb . tostring())；}然后我们基于AJAX的搜索提示功能成功完成，运行效果如下：

以上就是ASP的实现过程。NET的搜索提示。内容很详细，思路很清晰。希望对大家的学习有帮助。