autocomplete

简单易用的自动补全插件。移植自 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"}}
  ]
}