jQuery UI AutoComplete 使用说明
更新时间：2011年06月20日 00:10:21 作者：
在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete，这为我们提供了又一个强大的开发工具，这里介绍一下这个控件的使用方式。
介绍
在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete，这为我们提供了又一个强大的开发工具，这里介绍一下这个控件的使用方式。
首先，jQuery UI 是基于 jQuery 的，所以，必须在你的页面中首先引用 jQuery 脚本库，然后再引用 jQuery UI 库，对于 jQuery UI 库来说，可以引用整个的库，也可以仅仅引用当前页面用到的库。
jQuery UI 的下载地址：http://jqueryui.com/download
一.基本配置
一般来说，引用独立的脚本可以减小页面的尺寸，我们这里使用独立的脚本。对于 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>
页面中当然要有一个输入框.
<div class="demo">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags" type="text">
</div>
</div>
二. 使用本地数据
对于使用来说，基本的使用非常简单，提示的数据可以来自数组。通过参数对象的 source 属性设置数据源。
<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 的详细说明参加这里：http://www.json.org/json-zh.html
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 UI 的最近更新中增加了自动完成控件 AutoComplete，这为我们提供了又一个强大的开发工具，这里介绍一下这个控件的使用方式。
首先，jQuery UI 是基于 jQuery 的，所以，必须在你的页面中首先引用 jQuery 脚本库，然后再引用 jQuery UI 库，对于 jQuery UI 库来说，可以引用整个的库，也可以仅仅引用当前页面用到的库。
jQuery UI 的下载地址：http://jqueryui.com/download
一.基本配置
一般来说，引用独立的脚本可以减小页面的尺寸，我们这里使用独立的脚本。对于 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>
页面中当然要有一个输入框.
复制代码 代码如下:
<div class="demo">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags" type="text">
</div>
</div>
二. 使用本地数据
对于使用来说，基本的使用非常简单，提示的数据可以来自数组。通过参数对象的 source 属性设置数据源。
复制代码 代码如下:
<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 的详细说明参加这里：http://www.json.org/json-zh.html
复制代码 代码如下:
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 UI Autocomplete 体验分享
- jQuery UI AutoComplete 自动完成使用小记
- jQuery UI Autocomplete 1.8.16 中文输入修正代码
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
- firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
- jQuery.Autocomplete实现自动完成功能（详解）
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- jquery autocomplete自动完成插件的的使用方法
- jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
- jQuery Autocomplete自动完成插件
- jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
相关文章
以前使用js代码来写的简单效果现在用jQ来写，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
这篇文章主要介绍了jQuery:unbind方法的使用详解的相关资料,unbind方法只能解绑用jQuery的bind方法以及用jquery方法注册的事件处理程序，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了JQuery each()嵌套使用，非常适合初学者,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery实现响应鼠标背景变化的动态菜单效果代码,涉及jquery鼠标mouseover事件操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
获取第一个匹配元素外部高度默认包括补白和边框，在本文将为大家介绍下具体的实现代码，此方法对可见和隐藏元素均有效，感兴趣的朋友可以了解下2013-09-09
这篇文章主要介绍了jquery实现的横向二级导航效果代码,可实现鼠标滑过导航出现下拉菜单切换的效果,非常简洁自然,涉及jquery鼠标hover事件及页面元素样式的动态改变技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
下面小编就为大家带来一篇flag和jq on 的绑定多个对象和方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
jquery中获取select选中值的代码，需要的朋友可以参考下。2011-06-06
只要能够不停地把第一个item移动到末尾，其余的自会往上填补空缺，填补的过程用动画放慢些，就能有不断滚动的视觉效果了，这种效果基于jquery怎么实现呢？下面小编给大家带来了jQuery列表循环滚动效果的实现思路代码，一起看看吧2021-08-08
最新评论