您现在的位置是:网站首页> 编程资料编程资料

ASP.NET搭配Ajax实现搜索提示功能_实用技巧_

2023-05-24 422人已围观

简介 ASP.NET搭配Ajax实现搜索提示功能_实用技巧_

平时的软件开发中,信息的搜索是经常碰到的,增加搜索关键字提示是提高用户体验的一种很好的办法。今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示!
1.需要了解的一些知识点

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

不同的浏览器对AJAX(XMLHttpRequest)对象的实现是不一样的,例如IE浏览器是通过ActiveX控件来实现AJAX对象。而其他一些浏览器比如火狐,它将AJAX对象实现成了一个浏览器内部的对象叫XMLHttpRequest,所以不同的浏览器创建AJAX对象的方式也就不同,那么我们来看看不同浏览器之间创建AJAX对象的方式:

在IE浏览器下面的创建:

 //IE浏览器 try { //IE5.0 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //IE5.5 以上版本 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } 

 在火狐浏览器下面的创建:

 //火狐, Safari 等浏览器 httpRequest = new XMLHttpRequest(); 

多浏览器AJAX对象创建函数:

 function createAjaxObj() { var httpRequest = false; //判断是否包含XMLHttpRequest对象 PS:将来IE高也有可能继承次对象 if (window.XMLHttpRequest) { //火狐 , Safari 等浏览器 httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml'); }//判断是否支持Active控件对象 else if (window.ActiveXObject) { //IE浏览器 try { //IE5.0 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //IE5.5以上 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } //返回创建好的AJAX对象 return httpRequest; }

(2)文本框内容改变的事件在不同浏览器下的使用

 文本框内容改变的事件目前来说还没有一个标准的版本。我们目前只关心IE与火狐好了,那么在IE和火狐下这两个时间分别怎么表示呢?

IE: onpropertychange

FireFox: oninput

  那么如何在页面加载时,根据浏览器给文本框附加对应的change事件呢?

1.JS如何判断浏览器版本                  

 //IE浏览器 if (navigator.userAgent.indexOf("MSIE") > 0) { } //火狐浏览器 if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {} 

 2.根据浏览器版本给文本框附加对应事件

 function getOs() { //判断浏览器类型 if (navigator.userAgent.indexOf("MSIE") > 0) { //此时假设文本框id为'txtSearch' //为文本框附加IE所支持的事件 document.getElementById('txtSearch').attachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { //此时假设文本框id为'txtSearch' //为文本框附加火狐所支持的事件 document.getElementById('txtSearch').addEventListener("input", search, false); OsTyep = "Firefox"; } } 

 3.根据浏览器版本给文本框清除对应事件

function ClearOS() {
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        //此时假设文本框id为'txtSearch'
        //为文本框清除IE所支持的事件
        document.getElementById('txtSearch').detachEvent("onpropertychange", search);
        OsTyep = "MSIE";
    } else if (navigator.userAgent.indexOf("Firefox") > 0) {
        //此时假设文本框id为'txtSearch'
        //为文本框清除火狐所支持的事件
        document.getElementById('txtSearch').removeEventListener("input", search, false);
        OsTyep = "Firefox";
    }
}

二、客户端的设计

(1)实现流程的分析

了解完以上知识点之后,我们来看一下实现搜索提示的一个整体流程:

                   1) 首先客户端通过文本框输入事件捕获输入的关键字

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

                   3) 服务器接受提交的关键字,进行查询将结果集返回给客户端进行显示

 流程如下:

 (2)样式的编写

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

(3)aspx页面与ajax_search.js文件的编写

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

1.页面的实现

2.根据浏览器创建AJAX对象

 var searchReq = createAjaxObj(); var OsTyep = ''; function getOs() { //判断浏览器类型 if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById('txtSearch').attachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { document.getElementById('txtSearch').addEventListener("input", search, false); OsTyep = "Firefox"; } } function ClearOS() { if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById('txtSearch').detachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { document.getElementById('txtSearch').removeEventListener("input", search, false); OsTyep = "Firefox"; } } function createAjaxObj() { var httpRequest = false; //判断是否包含XMLHttpRequest对象 PS:将来IE高也有可能继承次对象 if (window.XMLHttpRequest) { //火狐 , Safari 等浏览器 httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml'); //ie: onpropertychange //ff: oninput } //判断是否支持Active控件对象 else if (window.ActiveXObject) { //IE浏览器 try { //IE5.0 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //IE5.5以上 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } //返回创建好的AJAX对象 return httpRequest; } 

 3.创建请求与返回数据的显示

 //异步请求服务器获取搜索结果 function search() { if (searchReq.readyState == 4 || searchReq.readyState == 0) { //获得文本框中的值 var valStr = escape(document.getElementById("txtSearch").value); //建立连接 searchReq.open("GET", encodeURI('Search.ashx?search=' + valStr+'&fresh=' + Math.random()), true); //当请求状态改变时调用 handleSearch方法 searchReq.onreadystatechange = handleSearch; searchReq.send(null); } } //返回结果处理方法 function handleSearch() { if (searchReq.readyState == 4) { //获得搜索提示结果的元素DIV var searchDIV = document.getElementById("search_div"); searchDIV.innerHTML = ""; //用^将返回的文本数据分割成数组 var resultStrArr = searchReq.responseText.split("^"); //循环构建HTML代码 for (var i = 0; i < resultStrArr.length - 1; i++) { var htmlStr = '
'; searchDIV.innerHTML += htmlStr; } ShowDiv(); x = -1; } }

 4.将数据选中数据显示文本框中

 上边代码中在循环构建HTML代码时,我们给构建的DIV加入了三个事件分别是:

 1 onmouseover="selectOverDiv(this,'+i+');"

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

 2 onmouseout="selectOutDiv(this,'+i+');"

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

 3 onclick="setSearch(this.innerHTML);"

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

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

 function selectOverDiv(div_value, i) { div_value.className = "search_link_over"; var my_div = document.getElementById("search_div").getElementsByTagName("div") var the_num = my_div.length; for (var k = 0; k < the_num; k++) { selectOut(my_div[k]); if (k == i) { selectOver(my_div[k]) } } isCheckDiv = true; x = i; } function selectOutDiv(div_value,i) { isCheckDiv = false; div_value.className = "search_link"; x = i; } function setSearch(value) { //清空文本框的内容改变事件是因为我们给选中值复制时 该事件会触发 //所以先清空次事件 ClearOS(); document.getElementById("txtSearch").value = value; //设置该属性为false 在调用HiddenDiv函数会隐藏提示结果DIV isCheckDiv = false; HiddenDiv(); //在赋值完成后再次附加修改时间 getOs(); } function ShowDiv() { var content = document.getElementById("txtSearch").value; var divConten = document.getElementById("search_div").innerHTML; if (content != '' && divConten != '') { document.getElementById("search_div").style.display = "block" } else { isCheckDiv = false; HiddenDiv(); } } function HiddenDiv() { if (isCheckDiv == false) { document.getElementById("search_div").style.display = "none"; document.getElementById("search_div").innerHTML = ''; } } 

 5.增加键盘上下键选中提示数据与回车键选中数据到文本框

 var index = -1; //表示当前选中的行索引 function keyDown() { var value = event.keyCode //向上38,向下40,回车13 var the_key = event.keyCode //判断提示DIV是否是现实状态 if (document.getElementById("search_div").style.display != "none") { //获取里面所用行 var my_div = document.getElementById("search_div").getElementsByTagName("div") var the_num = my_div.l
                
                

-六神源码网