Web 开发 jQuery 中级开发 .NET C#

使用 jQuery Autocomplete 为用户提供类似 Google 的搜索建议

zoyobar

4.67/5 (3投票s)

2011年11月28日

CPOL

2分钟阅读

23600

本文解释了 Autocomplete 的功能和用法。

原始帖子可以在这里找到。

简介/目录

由于时间有限，无法保证多篇博文的同步。您可以在以下地址查看最新内容，敬请谅解

http://zoyobar.blogspot.com/2011/11/use-jquery-autocomplete-to-give-user.html

下载示例：JQueryElementDemo-en.zip，目录是 /autocomplete/Default.aspx。

本文解释了 Autocomplete 的功能和用法，目录如下

准备
Source 属性
- 数组
- URL
- 方法
Delay 属性
MinLength 属性
其他属性和事件

准备

请确保您已从下载 JQueryElement 获取了最新版本的 jQueryElement。

使用以下语句引用 namespace

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

除了 namespace 之外，您还需要引用 jQueryUI 脚本和样式；在此处下载的压缩文件中有一个 jQueryUI 的自定义主题。如果您需要更多主题，可以在 jqueryui.com/download 获取。

<link type="text/css" rel="stylesheet"
 href="[style path]/jquery-ui-<version>.custom.css" />
<script type="text/javascript"
 src="[script path]/jquery-<version>.min.js"></script>
<script type="text/javascript"
 src="[script path]/jquery-ui-<version>.custom.min.js"></script>

Source 属性

Source 是 Autocomplete 的一个重要属性，它包含建议的条目，可以是以下三种形式：数组、URL 或方法。

数组

Source 属性可以设置为 JavaScript 数组，形式为：['entry 1', 'entry N'] 或 [{ label: 'entry 1', value: 'value 1' }, { label: 'entry N', value: '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 作为建议条目。

URL

如果 Source 属性指定为 URL，则该 URL 应返回一个与上面提到的相同的 JavaScript 数组

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

在上面的代码中，您需要使用单引号将 URL 括起来，否则会生成错误。上面的 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 ( ) ) )
  );

 /*
  * [
  * "suggested entry 1", "suggested entry 2"
  * ]
  * 
  * [
  *  { "label": "suggested entry 1", "value": "value 1" },
  *  { "label": "suggested entry 2", "value": "value 2" }
  * ]
  * */
}

在代码中，通过 Request 对象获取由 autocomplete 传递的参数 term，它表示用户当前输入的文本。根据 term 参数，我们可以生成建议的条目并以 JavaScript 数组的形式将其返回给客户端。

如果您需要在不同的 .NET 版本中返回数据，请参考在不同的 .NET 版本中返回 JSON。