开发者文档
- 简单易用的自动补全插件。移植自 https://github.com/devbridge/jQuery-Autocomplete
注意，由于我们在示例中使用的是静态的假数据，当没有进行js过滤的时候无论输入任何字母，补全结果都是相同的，这不是bug。
- 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中。
- 更新 v1.2.0：增加了对返回数据格式的说明。
1.使用本地数据
Type country name in english:
2.使用Ajax数据
Type country name in english:
3.宽度自适应
Type country name in english:
调用 autocomplete 可以传入一个参数对象，所有配置项如下表所示。其中JSON格式的配置项同时也支持以data-api的形式来配置。
| 参数 | 默认值 | 说明 |
|---|---|---|
| autoSelectFirst | false | 是否自动选中第一个 |
| appendTo | "body" | 自动补全的菜单的容器 |
| serviceUrl | null | 获取数据的接口(服务器端的URL地址或者生成URL字符串的回调方法)，如果定义了lookup 则此配置无效 |
| lookup | null | 读取本地数据，建议查找数组。比如 ['a', 'b', 'c']，如果配置了lookup，则忽略serviceUrl |
| onSelect | null | 选中结果时的回调,参数 (element, suggestion) |
| width | auto | 下拉框宽度，默认与输入框一样 |
| minChars | 1 | 出发自动补全的字符最小数量 |
| maxHeight | 300 | 下拉菜单的最大高度 |
| params | {} | 附加参数 |
| formatResult | Autocomplete.formatResult | 自定义格式化补全结果，参数(suggestion, currentValue) |
| noCache | false | 是否要缓存 |
| lookupFilter | function (suggestion, originalQuery, queryLowerCase) { return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1; } | 过滤自动补全的结果，默认是匹配查询词。如果不需要过滤结果可以置为 $.noop。 |
| paramName | query | 查询请求参数 |
| transformResult | function (response) { return typeof response === 'string' ? $.parseJSON(response) : response; } | 处理ajax的返回结果，参数 (response)。 |
通过HTML标记自动初始化
在input上添加 data-toggle='autocomplete' 可以启用自动补全，并且所有js中可以配置的JSON格式的参数都可以通过 data-api 在html中直接配置。
比如：
- data-service-url
- data-lookup
- data-auto-select-first
返回数据格式
ac支持两种返回数据格式，一种是纯字符串的格式，如下所示
{
"query": "a",
"suggestions": [
"张三",
"李四",
"王五",
"赵六"
]
}
另一种是 data-value 格式，其中value是自动补全的文本，而data可以是任意值，在onSelect等回调中可以取到data对象。如下所示：
{
"query": "a",
"suggestions": [
{ "value": "张三", "data": { "id": "123", "gender": "male"}},
{ "value": "李四", "data": { "id": "124", "gender": "female"}},
{ "value": "王五", "data": { "id": "125", "gender": "male"}}
]
}
下拉菜单样式
关于下拉菜单样式，参见这里 dropdown