手机版

ASP.NET和ajax的智能搜索功能代码

时间:2021-10-24 来源:互联网 编辑:宝哥软件园 浏览:

第一步,先做好搜索页面复制代码代码如下: %@页面语言=' VB ' AutoEventWireup=' false ' CodeFile=' Default。aspx。VB ' Inherits=' _ Default ' %!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title无标题页/title脚本语言=JavaScript src=jscript。js类型=' text/JavaScript '/script style # result { position : absolute;宽度宽度:150像素宽度:像素宽度33600像素宽度索引:1;font-size :14 pxborder: 1px虚线# ccccc4display:none} #结果先挂{底色: # DDDDDDheight :15 xpadding-top :5 px;} #结果b { width :61 pxfloat 3360 left } #结果nobr { width :61 pxfloat 3360 left } #结果其他挂{底色: # FFFFFFheight :15 xpadding-top :5 px;} #内容{左边距:0 px左填充:0 px}/style/head body form id=' form 1 ' runat=' server ' div align=center style=' padding-top :100 px ' input id=' search txt ' OnKeyUp=' StartRequest(this。value)'/!-输入框-/div div id=' result ' align=' center '!-下拉搜索框- div class='firstHang '搜索标题/div div id=' stockListDiv '/div/div/form/body/html脚本语言=' JavaScript ' var obj=document。getelementbyid(' result ');var rela=文档。getelementbyid(' search txt ');SetDivLocation(obj,rela);函数SetDivLocation(obj,rela) //设置下拉搜索框与输入框的相对位置{ var x,y;var oRect=rela。getboundingclientrect();//获得输入框的位置x=oRect.lefty=oRect.topobj。风格。left=x ' px//这里要加上px,否则在fiexfox就会失效物体。风格。top=y rela。偏移右侧“px”;}/脚本第二步,添加返回搜索结果的页面,该页面由于不用在客户端显示,所以就不用做界面。复制代码代码如下:进口系统。文本分部类搜索继承系统。网页受保护子页面加载(由发件人作为对象,由系统作为值。处理我。将暗淡的搜索内容加载为字符串=请求("内容")。' ToString '获取搜索内容如果是数字的(搜索内容),则将搜索结果模糊为新的字符串生成器,然后判断是否为数字,输入不同的内容搜索结果.追加(' div class=' OtherHang ' nob r11/nob r11/nobr/div ')搜索结果.追加(' div class=' otherHang ' nobr 22/nobr nobr 22/div ')搜索结果.追加(' div class=' other hang ' nobr 22/nobr 22/div ')Else搜索结果.追加(' div class=' OtherHang ' nob raa/nob no braa/nobr/div ')搜索结果.追加(' div class=' OtherHang ' norbb/nob rbb/nobr/div ')搜索结果.追加(' div class=' OtherHang ' nob RCC/nobr nobr/div ')结束如果响应。写入(搜索结果' ToString .)向客户端发送结果回应“End()”关闭客户端输出流结束子结束类第三步就是最关键的一步了复制代码代码如下: //JScript文件var xmlHttp函数火山口xmlHttpRequest() { //判断是否为工业管理学(工业工程)浏览器如果(窗口ActiveX对象){ xmlHttp=新的ActiveX对象(' Microsoft .XMLHTTP’);} else if(窗口XMLHttpRequest){ xmlHttp=新窗口. XMLHttpRequest();} } //启动对页面的请求函数startRequest(内容){ 0陨石坑xmlhttprequest();//设置请求状态变化调用的方法xmlhttp。onreadystatechange=handleState;//建立对服务器的调用var url='Search.aspx?content=' escape(content);'发送页面url xmlHttp.open('get ',url,true);xmlhttp。发送(null);}函数handleState(){ try { if(xmlhttp。readystate==4){ if(xmlhttp。status==200){ var data=xmlhttp。' responsetext'得到搜索结果var结果=文档。getelementbyid(' result ');var stockListDiv=文档。getelementbyid(' stockListDiv ');如果(数据==' ')如果搜索结果为空,不显示下拉框{结果。风格。显示='无';stocklist div . innerhtml=} else { stocklist div。innerhtml=数据;'显示下拉框结果。风格。display=' block} } } }捕获(错误){错误.消息} }最后实现的效果如下

版权声明:ASP.NET和ajax的智能搜索功能代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。