应用表明亚洲城ca88唯一备用,自动达成使用小记

介绍 在 jQuery UI 的最近更新中增加了自动完成控件
AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式。
首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery
脚本库,然后再引用 jQuery UI 库,对于 jQuery UI
库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库。
jQuery UI 的下载地址:
一.基本配置
一般来说,引用独立的脚本可以减小页面的尺寸,我们这里使用独立的脚本。对于
autocomplete 来说,涉及到下面的几个脚本文件。

页面:

复制代码 代码如下:

复制代码 代码如下:

<script src=”jquery-1.5.1.min.js”
type=”text/javascript”></script>
<script src=”jquery.ui.core.js”></script>
<script src=”jquery.ui.widget.js”></script>
<script src=”jquery.ui.position.js”></script>
<script src=”jquery.ui.autocomplete.js”></script>

<%@ Page Language=”C#” AutoEventWireup=”true”
CodeFile=”Test.aspx.cs” Inherits=”web_Test” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head runat=”server”>
<title>测试</title>
<link type=”text/css” rel=”stylesheet” />
<link href=”../css/jquery.ui.all.css” rel=”stylesheet”
type=”text/css” />
<script type=”text/javascript”
src=”;
<!– 解决下拉列表框被遮盖 jquery.bgiframe –>
<script type=”text/javascript” language=”javascript”
src=”../js/jQui/jquery.bgiframe-2.1.1.js”></script>
<script type=”text/javascript” language=”javascript”
src=”../js/jQui/jquery.ui.core.js”></script>
<script type=”text/javascript” language=”javascript”
src=”../js/jQui/jquery.ui.widget.js”></script>
<script type=”text/javascript” language=”javascript”
src=”../js/jQui/jquery.ui.mouse.js”></script>
<!– jquery.ui.autocomplete –>
<script type=”text/javascript” language=”javascript”
src=”../js/jQui/jquery.ui.autocomplete.js”></script>
<script language=”javascript” type=”text/javascript”>
$(function(){
$(“#txtTest”).autocomplete({
minLength:1,
source: function(request, response) {
$.ajax({
url: “../ajax/GetAllWords.ashx”,
dataType: “json”,
data: request,
success: function( data ) {
response( data );
}
});
}
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<input id=”txtTest” type=”text” />
</div>
</form>
</body>
</html>

页面中当然要有一个输入框.

后台:

复制代码 代码如下:

复制代码 代码如下:

<div class=”demo”>
<div class=”ui-widget”>
<label for=”tags”>
Tags:
</label>
<input id=”tags” type=”text”>
</div>
</div>

<%@ WebHandler Language=”C#” Class=”GetAllWords” %>
using System;
using System.Web;
public class GetAllWords : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString[“term”] != null &&
context.Request.QueryString[“term”] != “”)
{
context.Response.Clear();
context.Response.Charset = “utf-8”;
context.Response.Buffer = true;
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.ContentType = “text/plain”;
context.Response.Write(GetLikeUserName(context.Request.QueryString[“term”]));
context.Response.Flush();
context.Response.Close();
context.Response.End();
}
}
/// <summary>
/// 拼接json
/// </summary>
/// <param name=”key”>关键词</param>
/// <returns></returns>
private String GetLikeUserName(string key)
{
jhg.BLL.web_wordManager wordManager = new jhg.BLL.web_wordManager();
//搜索,返回10个关键词
string[] listWord = wordManager.GetSearchWord(key, 10);
System.Text.StringBuilder sbstr = new System.Text.StringBuilder(“[“);
int ct = listWord.Length;
for (int i = 0; i < ct; i++)
{
sbstr.Append(“\”” + listWord[i] + “\””);
if (i == ct – 1)
sbstr.Append(“]”);
else
sbstr.Append(“,”);
}
return sbstr.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}

**二. 使用本地数据

注:
文件:jquery.ui.autocomplete.css
.ui-autocomplete { position: absolute; cursor: default; }
去掉: position: absolute;
效果图:
亚洲城ca88唯一备用 1

**对于使用来说,基本的使用非常简单,提示的数据可以来自数组。通过参数对象的
source 属性设置数据源。

您可能感兴趣的文章:

  • jQuery.Autocomplete实现自动完成功能(详解)
  • Jquery AutoComplete自动完成
    的使用方法实例
  • jQuery UI AutoComplete
    使用说明
  • jQuery UI Autocomplete
    体验分享
  • jQuery
    Autocomplete自动完成插件
  • JQuery autocomplete
    使用手册
  • 基于jquery的文本框与autocomplete结合使用(asp.net+json)
  • jQuery
    autocomplete插件修改
  • jQuery
    Autocomplete简介_动力节点Java学院整理

复制代码 代码如下:

<script type=”text/javascript”>
$(function () {
var availableTags = [
“ActionScript”,
“AppleScript”,
“Asp”,
“BASIC”,
“C”,
“C++”,
“Clojure”,
“COBOL”,
“ColdFusion”,
“Erlang”,
“Fortran”,
“Groovy”,
“Haskell”,
“Java”,
“JavaScript”,
“Lisp”,
“Perl”,
“PHP”,
“Python”,
“Ruby”,
“Scala”,
“Scheme”
];
// 这里使用数组作为数据源,availableTags 是数组的名称
$(“#tags”).autocomplete({
source: availableTags
});
});
</script>

现在,一个自动完成的效果已经可以工作了。

三.使用远程数据源 还可以为 source
属性设置一个表示远程地址的字符串,通过这个远程地址来获取 json 数据。
对于 autocomplete
来说,当提供一个地址的时候,在用户开始在输入框中输入时,将会向这个地址发出一个
GET 请求,请求中的参数名为 term 的参数表示当前输入的内容,
返回的结果必须是 json 格式的数据。
JSON 的详细说明参加这里:

复制代码 代码如下:

var url = “serviceHandler.ashx”;
$(“#auto”).autocomplete(
{
source: url
}
);

我们可以通过一个一般处理程序来返回数据。需要特别注意的是,返回的串必须符合
JSON 格式要求,字符串必须使用双引号。

复制代码 代码如下:

public class serviceHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = “text/plain”;
HttpResponse response = context.Response;
System.IO.TextWriter writer = response.Output;
// 注意,必须是标准的 JSON 格式串,必须使用双引号
writer.Write(“[\”One\”, \”Two\”, \”Three\”]”);
}
public bool IsReusable {
get {
return false;
}
}
}

通常在使用远程数据的时候,我们希望在用户输入几个字符之后,再进行提示,这可以通过
minLength 属性来设置,如果是本地数据源,通常为 0,
对于远程数据源,或者大量数据的情况,应当适当增加这个值。这样,我们的脚本就成为了下面的样子了。

复制代码 代码如下:

var url = “serviceHandler.ashx”;
$(“#auto”).autocomplete(
{
source: url,
minLength: 2
}
);

四. 带有缓存的远程数据源 通过为 source
提供一个函数,我们可以为远程数据增加一个本地的缓存。这样就不必每次都到服务器中进行查询。

复制代码 代码如下:

$(function () {
var url = “serviceHandler.ashx”;
var cache = {}, lastXhr;
$(“#auto”).autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, request, function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
}
});
}
);

您可能感兴趣的文章:

  • jQuery.Autocomplete实现自动完成功能(详解)
  • Jquery AutoComplete自动完成
    的使用方法实例
  • jQuery UI Autocomplete
    体验分享
  • jQuery UI AutoComplete
    自动完成使用小记
  • jQuery
    Autocomplete自动完成插件
  • JQuery autocomplete
    使用手册
  • 基于jquery的文本框与autocomplete结合使用(asp.net+json)
  • jQuery
    autocomplete插件修改
  • jQuery
    Autocomplete简介_动力节点Java学院整理

相关文章