新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

注意,由于我们在示例中使用的是静态的假数据,当没有进行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

通过ajax读取数据

使用本地数据


              

返回数据格式

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"}}
  ]
}

纯字符串格式

data-value 格式

请选择

              

下拉菜单样式

关于下拉菜单样式,参见这里 dropdown