2009-08-04 14:56
一、介绍
本地和远程数据都可以使用：本地适合小数据集（如包含50项的地址簿），对于大的数据集就要用远程数据了，如包含成千上万记录的数据库。
二、实例（使用的是本地数据）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
三、API文档
1、autocomplete(url or data,options):jQuery
url:String/Array，可以是一个指向远程数据的URL或一个本地数据的数组。
options:Options，一个键值对集合，用来配置自动完成选项，所有的选项都是可选的。
作用：使一个输入框或文本域实现自动完成。
如果是使用远程数据，当用户开始键入，一个请求就发送到指定的URL，该请求携带一个名字为q的查询参数，q的内容就是输入框的值，另外还有一个limit参数用来指定匹配的最多选项（好像limit都没什么用）。注意请求的URL中输出的数据应该是一行一条。即输出是使用response.Write rs(“code”)&vbcrlf
2、result(handler):jQuery
Handler:Function，事件处理函数，function(event,selectedlistitem){}
作用：绑定事件处理程序到search事件（见后），可以随时用unbind(“result”)来移除事件
3、search():jQuery
作用：触发一个search事件
4、flushCache():jQuery
作用：清除缓存
5、setOptions(options):jQuery
Options:Options
作用：更新当前自动更新字段的设置，这允许你更改URL，最多显示匹配数等，如果你更改了URL，那么请确保调用了flushCache()方法。
四、向导
1、安装
取决于你要提供什么样的数据，少量数据则使用本地数据，这些数据只加载一次并缓存起来，如果数据很多，则要考虑使用远程访问了。本地访问，则只要传递一个数组类型的数据，如果使用远程访问，则指定一个URL，该插件会携带一个包含当前搜索值的q参数来访问指定的数据。
2、字段间的依赖
一个自动完成字段经常依赖于其他字段的值，在这种情况下，extraParams选项能提供必要的动态参数。
$("#states").autocomplete(url, {
extraParams: {
country: function() { return $("#country").val(); }
}
});
3、样式表
Jquery.autocomplete.css
4、搜索页替换
var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
一、介绍
本地和远程数据都可以使用：本地适合小数据集（如包含50项的地址簿），对于大的数据集就要用远程数据了，如包含成千上万记录的数据库。
二、实例（使用的是本地数据）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
三、API文档
1、autocomplete(url or data,options):jQuery
url:String/Array，可以是一个指向远程数据的URL或一个本地数据的数组。
options:Options，一个键值对集合，用来配置自动完成选项，所有的选项都是可选的。
作用：使一个输入框或文本域实现自动完成。
如果是使用远程数据，当用户开始键入，一个请求就发送到指定的URL，该请求携带一个名字为q的查询参数，q的内容就是输入框的值，另外还有一个limit参数用来指定匹配的最多选项（好像limit都没什么用）。注意请求的URL中输出的数据应该是一行一条。即输出是使用response.Write rs(“code”)&vbcrlf
2、result(handler):jQuery
Handler:Function，事件处理函数，function(event,selectedlistitem){}
作用：绑定事件处理程序到search事件（见后），可以随时用unbind(“result”)来移除事件
3、search():jQuery
作用：触发一个search事件
4、flushCache():jQuery
作用：清除缓存
5、setOptions(options):jQuery
Options:Options
作用：更新当前自动更新字段的设置，这允许你更改URL，最多显示匹配数等，如果你更改了URL，那么请确保调用了flushCache()方法。
四、向导
1、安装
取决于你要提供什么样的数据，少量数据则使用本地数据，这些数据只加载一次并缓存起来，如果数据很多，则要考虑使用远程访问了。本地访问，则只要传递一个数组类型的数据，如果使用远程访问，则指定一个URL，该插件会携带一个包含当前搜索值的q参数来访问指定的数据。
2、字段间的依赖
一个自动完成字段经常依赖于其他字段的值，在这种情况下，extraParams选项能提供必要的动态参数。
$("#states").autocomplete(url, {
extraParams: {
country: function() { return $("#country").val(); }
}
});
3、样式表
Jquery.autocomplete.css
4、搜索页替换
var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
5713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
