JQuery AutoComplete插件使用手册

kokorodo

浏览: 38859 次
性别:
来自: 广州

最近访客更多访客>>

ThomasBarsoe

suncong1024

stc324769774

菜鸟瞎搞

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web 前端

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;

});

分享到：

jquery autoComplete 自动完成输入提示 I ... | Jquery.ajax不能解析json对象，报parseerr ...

2011-09-01 10:51
浏览 1226
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论