使用 jQuery autocomplete 像 Google 一样给出建议词条

周末时候, 作了一个根据用户输入显示建议条目的例子, 建议的条目当然是我随意拼接的.

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/JQueryElementAutoCompleteDoc

请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码

本文将说明 Autocomplete 控件的功能以及使用过程中的注意事项和技巧, 目录如下:

  * 准备

  * Source 属性

    * 数组

    * 地址

    * 函数

  * Delay 属性

  * MinLength 属性

  * 其它属性和事件

准备

请确保已经在 Download 下载资源 中的 JQueryElement.dll 下载一节下载 JQueryElement 最新的版本.

请使用指令引用如下的命名空间:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
    TagPrefix="je"%>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.web.jqueryui"
    TagPrefix="je"%>

除了命名空间, 还需要引用 jQueryUI 的脚本和样式, 在 Download 下载资源 的 JQueryElement.dll 下载一节下载的压缩包中包含了一个自定义样式的 jQueryUI, 如果需要更多样式, 可以在 http://jqueryui.com/download 下载:

<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-1.8.15.custom.css"/>
<script type="text/javascript" src="[脚本路径]/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="[脚本路径]/jquery-ui-1.8.15.custom.min.js"></script>

Source 属性

Source 属性是 Autocomplete 重要的属性之一, 包含建议的条目, 可以是如下三种形式: 数组, 一个返回数组的地址, 或者一个函数.

数组

Source 属性可以被设置为一个 javascript 数组, 形式为: ['条目 1', '条目 N'] 或者 [{ label: '条目 1', value: '值 1' }, { label: '条目 N', value: '值 N' }]. 后一种形式中, label 表示建议条目的文本, value 则表示选择某个条目后, 文本框显示的文本:

<je:Autocomplete ID="aA" runat="server"
    Source="['vs 2002','vs 2003','vs 2005','vs 2008','vs 2010']">
</je:Autocomplete>

上面的代码中, 如果用户输入了 vs 201, 则将显示建议的条目 vs 2010.

地址

如果将 Source 属性指定为一个地址, 则该地址应该返回一个 javascript 数组, 形式和上面提到的相同:

<je:Autocomplete ID="aA" runat="server"
    Source="'http:// ... /source.js'">
</je:Autocomplete>

需要说明的是, 这里的地址需要使用单引号括住, 否则将产生错误. 而上面的 source.js 可能如下:

["tom", "tomas", "li", "lili"]

函数

使用函数可以动态的根据用户的输入显示建议条目, 但并不需要来编写这个函数, 因为在 Autocomplete 中可以通过 SourceAsync 属性来完成:

<je:Autocomplete ID="k" runat="server"
    SourceAsync-Url="google_getitem.ashx">
</je:Autocomplete>

代码中, SourceAsync-Url 被设置为 google_getitem.ashx, 因此当用户输入变化时, autocomplete 将访问 google_getitem.ashx 来获取建议条目, google_getitem.ashx 的 ProcessRequest 方法:

public void ProcessRequest ( HttpContext context )
{
    context.Response.ContentType = "text/javascript";
    context.Response.Cache.SetNoStore ( );

    string term = context.Request["term"];
    List<object> items = new List<object> ( );

    for ( int index = 0; index < term.Length; index++ )
        items.Add ( term + "-" + term.Substring ( 0, index + 1 ) );

    context.Response.Write ( new JavaScriptSerializer ( ).Serialize (
        SampleHelper.CreateJSONArray ( items.ToArray ( ) ) )
        );

    /*
     * [
     *    "建议词条1", "建议词条2"
     * ]
     * 
     * [
     *  { "label": "建议词条1", "value": "实际内容1" },
     *  { "label": "建议词条2", "value": "实际内容2" }
     * ]
     * */
}

在代码中, 通过 Request 对象获取了 term 参数, 这个参数是 autocomplete 传递来的, 表示了用户当前输入的文本. 根据 term 参数, 就能生成建议的条目, 并以 javascript 数组的形式返回给客户端.

如果需要在不同 .NET 版本中返回数据, 请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON.

Delay 属性

Delay 属性表示触发匹配操作的延迟, 默认为 300 毫秒.

MinLength 属性

MinLength 属性表示触发匹配操作的最少字符数, 也就是当用户输入多少个字符后才会进行匹配.

其它属性和事件

至于 autocomplete 的其它属性和事件, 可以参考 http://docs.jquery.com/UI/Autocomplete.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/fZu-HcdijZA/, 建议全屏观看.