【asp】ASP.NET搭配Ajax实现搜索提示功能-net-ajax-搜索提示

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【ASP.NET搭配Ajax实现搜索提示功能】，下面是详细的讲解！

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

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

（1）AJAX对象不同浏览器的创建

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

在IE浏览器下面的创建：

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

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

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

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

IE： onpropertychange

FireFox： oninput

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

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

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

 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对象

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

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

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

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

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

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

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

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

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

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

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

3.服务器端的设计

（1）实现一个虚拟的数据源

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

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

（2）搜索数据源返回固定格式数据以字符串形式

  紧接着我们要在ProcessReques方法中加入我们搜索数据源构建返回相应数据集，拼接结果字符串返回给客户端。代码如下：

 那么我们的基于AJAX的搜索提示功能就顺利的完成了，运行效果如下：

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

关于ASP.NET搭配Ajax实现搜索提示功能的用户互动如下：

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细