AjaxToolKit---AutoComplete智能提示输入的实现

1.       Introduction

AutoComplete控件确实是个好东西,当下各大搜索引擎都都很厉害的自动完成功能。大家每天都在使用。 它实现的功能是当你在一个文本框输入字符时, 然后使用web service的方法返回一些和你输入的字符相似的字符串节省你的文本输入时间并有可以给你提示的功能。

AutoComplete是一个可以附属到任何一个TextBox上的控件, 在WebService中可以调用数据库中的数据, google的API, 或者是一些随机生成数据的函数等等。

 

 

2.       Properties:

    <ajaxToolkit:AutoCompleteExtender 

            runat="server" 

            ID="autoComplete1" 

            TargetControlID="myTextBox"

            ServiceMethod="GetCompletionList"

            ServicePath="AutoComplete.asmx"

            MinimumPrefixLength="2" 

            CompletionInterval="1000"

            EnableCaching="true"

            CompletionSetCount="20" 

            CompletionListCssClass

                ="autocomplete_completionListElement" 

            CompletionListItemCssClass

                ="autocomplete_listItem" 

            CompletionListHighlightedItemCssClass

                ="autocomplete_highlightedListItem"

            DelimiterCharacters=";, :">

            <Animations>

            <OnShow> ... </OnShow>

            <OnHide> ... </OnHide>

            </Animations>

            </ajaxToolkit:AutoCompleteExtender>

上面是个完整的autocompleteextender结构,其中斜体部分为可选的设置:

a.       TargetControlID: 需要添加自动提示的TextBox空间ID.

b.       ServicePath: Web Service的路径, 一般就是个asmx文件和一个cs文件,在WCF中就不是个asmx文件了。

c.       ServiceMethod: 提供自动完成下拉列表的一个方法,且必须是servicePath的一个方法

d.       ContextKey: 如果设置了这个字段值,那么就需要在web service方法的参数中设置一contextKey命名的字符串。

 [System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public string[] GetCompletionList(

string prefixText, int count, string contextKey)

{ ... }

e.       UseContextKey: 如果ContextKey被设置,那么该属性被自动设置。

f.        MinimunPrefixLength: TextBox中最少输入几个字符时,开始出现自动完成提示。

g.       CompletionInternal: 以微妙为单位表示调用Web Service的间隔。

h.       EnableCaching: 是否使用客户端缓存。Y,N.

i.        CompletionSetCount: 每次显示的提示数据的个数。

j.        CompletionListCssClass: 自动提示下拉列表Css样式。

k.       CompletionListItemCssClass: 自动提示下拉列表的各个字符串的Css样式。

l.        CompletionListHighlightedItemCssClass: 当某个数据项被选中时这个数据项的Css样式。

m.     DelimiterCharacters - 可以指定若干个字符来切分输入框中的字符，作为不同的数据提示检索条件

n.       FirstRowSelected - 标志提示信息框中是否默认第一条数据项被选中

o.       Animations - AutoComplete 扩展动画。

p.       显示 - 当显示提示信息的时候出现的动画。动画可以应用 <HideAction Visible="true" />来控制显示提示框的其可视化信息

q.       隐藏 - 当提示信息框被关闭时出现的动画

 

3.       Example:

前面都是介绍属性的,这部分会三个例子,一个是MS提供的调用一个随机生成数的方法,

还有两个是我给大家提供的分别调用google API和从数据库查找匹配数据的方法。

我使用的是VS2005, 而且已经安装好了ajaxtoolkit,

第一步: 创建一个ajaxtoolkit模板:

 

随便起个名字, 可以为AjaxControlToolKit_Autocomplete

 

第二步: 先以MS提供的那个例子说明一下：先向default.aspx页面拖入一个textBox,修改它的ID为myTextBox, 然后在TextBox下面拖入一个AjaxToolKit控件AutoCompleteExtender,修改它的ID为autocomplete1 ,然后再添加一个HTML控件input,类型为submit,然后设置style为display:none.

 

上面的截图中可以看到当字符串为两个或以上时才会出现自动提示,且每次展示20条。

这里用动画来实现的下拉列表,主要是实现了当浏览器第一次实现自动完成时得到它的自动提示列表的长度,然后用fade来慢慢展示和收缩下拉列表,(如果你对animation不了解,可以看看前面那边文章)

这里还用到一段javascirpt来解决浏览器单个form自动提交行为。。

<script type="text/javascript">

                // Work around browser behavior of "auto-submitting" simple forms

                var frm = document.getElementById("form1");

                if (frm) {

                    frm.onsubmit = function() { return true; };

                }

            </script>。

具体的代码可以再文章后面提供的链接中下载。

然后就是创建一个web service的文件,如果没用过web service也别担心,很简单的。

先选择add item添加一个autocomplete.asxm文件,如下图,vs会自动在app_code文件夹生成一个AutoComplete.cs文件:

 

在代码文件中添加一个web方法:

 

然后你运行一下,就可以感受自动完成的功能了。

第二个例子是从数据库的一个city表中取出所有匹配的城市名字,作为自动下拉列表。

 

后台的web方法还是在autocomplete.asmx的cs文件中。

 

 

注意在web.config中添加connctionString和在引用命名空间那里加上using System.Configration。

第三个例子是引用google的API来实现搜索。

首先需要在页面拖入一个textbox,一个button和一个AutoCOmpleteExtender。

Aspx文件如下：

 

Web service如下:

 

同时为了让你的button能够转到google的搜索你需要在default.aspx文件后台加上如下代码:

 

第四步:用到的css:

 

 

4.       Layout and sourcecode:

 

源代码下载:http://download.csdn.net/source/1417000