jQuery.AutoComplete (1.1.2) 简介 样式
� - width
� - maxHeight
� - itemHeight
� - listStyle
� - listDirection
数据
� - data
� - ajaxDataType
� - ajaxParams
� - ajaxTimeout
� - ajaxType
� - maxItems
事件
� - matchHandler
� - emphasisHandler
� - createItemHandler
� - beforeLoadDataHandler
� - afterSelectedHandler
行为
� - async
� - emphasis
调试
� - onerror
ChangeLog
� v1.1.2
� v1.1.1
� v1.1.0
jQuery.AutoComplete 是一个基于 jQuery 的自动补全插件。借助于 jQuery 优
秀的跨浏览器特性，可以兼容 Chrome/IE/Firefox/Opera/Safari 等多种浏览
器。
特性一览：
� 支持补全列表的宽度设定。
� 支持补全列表的最大高度设定。
� 支持补全列表的行数限制。
� 支持补全列表的显示位置及方向的设定。
� 支持自定义匹配规则。
� 支持匹配文本的渲染。
� 支持自定义匹配文本的渲染样式。
� 支持补全列表的样式设定。
� 支持自定义补全列表项的创建。
� 支持多种数据源。
� 支持'json'和'xml'两种数据格式。
� 支持异步处理。
� 支持错误调试。
� 支持 jQuery1.7.1+。
在 Html 文件的</head>标签之前，引入插件:
<script type="text/javascript" src="/path/to/jquery-
1.7.1.min.js"></script>
<link rel="stylesheet" type="text/css"
href="/path/to/jquery.autocomplete.css"></link>
<script type="text/javascript"
src="/path/to/jquery.autocomplete.js"></script>
一个简单的例子:
$('#sample').AutoComplete({
'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven',
'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']
});
源代码已托管在 Github 上，您可以把发现的 bugs 和希望扩展的 features 提交
到 issues 页面。
直接下载:
(点击右键, 然后另存为)
jquery.autocomplete.js (1.1.2)
16kb, 未经压缩，带有注释
jquery.autocomplete.min.js (1.1.2)
8kb, 使用开源中国在线工具压缩
jquery.autocomplete.css (1.1.2)
2kb
样式
width 列表的宽度。
类型：数字，字符串默认值: 320 单位: px
当列表宽度不足以容纳下列表项的内容时，列表项的文本以折行的方式显示。
可以通过设定足够大的列表宽度，避免折行的发生。
[since v1.1.0]如果设定 width 为 'auto'，那么补全列表的宽度与输入框的
宽度一致。
示例: 宽度设为数字
function(input) {
$(input)
.AutoComplete({
'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
'width': 300
});
}
示例: 宽度设为'auto'
function(input) {
$(input)
.AutoComplete({
'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
'width': 'auto'
});
}
maxHeight 列表的最大高度。
类型：数字默认值: null 单位: px
限制列表的高度不能大于某个值。当列表实际长度大于限制值时，显示纵向滚
动轴。
示例:
function(input) {
$(input)
.AutoComplete({
'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
'maxHeight': 100
});
}
itemHeight 列表项的高度。
类型：数字默认值: null 单位: px
示例:
function(input) {
$(input)
.AutoComplete({
'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
'itemHeight': 50
});
}
listStyle 列表的样式。
类型：字符串默认值: 'normal'范围: ['normal', 'iconList', 'custom']
'normal': 普通文本样式。
'iconList': 左边是图标右边是文本的样式。
'custom': 自定义样式。须配合 createItemHandler 参数一起使用。
示例: 'normal':
function(input) {
$(input)
.AutoComplete({
'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
'listStyle': 'normal'
});
}
示例: 'iconList':
function(input) {
var world = ['Cambodia', 'Cameroon', 'Canada', 'Cape-Verde',
'Cayman-Islands', 'Central-African-Republic', 'Chad', 'Chile',
- 1
- 2
前往页