在谷歌中,使用jQuery自动完成来给用户搜索建议

分享于 

6分钟阅读

Web开发

  繁體

原来的帖子可以在这里找到,这里是

简介/目录

由于限制时间,同步不能在多个博客文章中保证。 在以下地址中,你可以查看电子邮件内容,希望你了解:

下载示例:JQueryElementDemo-en.zip,该目录为 /autocomplete/Default.aspx。

本文介绍了功能和使用 Autocomplete Autocomplete的功能,该目录如下:

准备

确保你在下载 JQueryElement 获得了最新版本的jQueryElement

使用以下语句引用 namespace:

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

除了 namespace,你需要参考jQueryUI脚本和样式;在下载的文件中,还有一个用于jQueryUI的自定义主题:。 如果需要更多主题,可以在 jqueryui.com/download 中获取这些主题:

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

源属性

SourceAutocomplete的重要属性,包含建议项,可以是以下三种形式: array,URL或者方法。

array

Source 属性可以设置为一个 JavaScript array,格式如下: ['entry 1', 'entry N'] 或者 [{ label: 'entry 1', value: 'value 1' }, { label: 'entry N', value: 'value N' }] 在后面的表单中,label 指示条目文本,值指示选定条目时文本框的文本:

<je:AutocompleteID="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 array:

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

如果你需要使用单引号,你需要用单引号来包含 URL,否则它会产生错误。 source.js 上面 可能如下所示:

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

可以根据用户输入动态显示建议项,但无需编写这里方法,因为可以通过Autocomplete的SourceAsync 属性完成这里方法:

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

如果要获取文本框的文本,则 Autocomplete 将访问 google_getitem.ashx,以获取建议的条目,google_getitem.ashx的ProcessRequest 方法:

publicvoid 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 传递的参数项,并说明当前由用户输入的文本。 我们可以根据术语参数生成建议条目,并在 JavaScript array 中将它们返回给客户端。

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

延迟属性

Delay 属性是 Autocomplete 等待匹配的延迟毫秒,默认值为 300毫秒。

MinLength属性

MinLength 属性是用户在 Autocomplete 触发匹配之前必须键入的最少字符数。

其他属性和事件类型

对于 Autocomplete的其他属性和事件,你可以引用 docs.jquery.com/UI/Autocomplete


相关文章