示例
自动完成即补全用户输入。
比如用户输入李，应用将最可能与用户匹配的李展示在列表中，供用户选择。
基础用法
PCPhonePad
<page>
<module>
<form
layout="horizontal">
<item
label="自动完成"
node="auto-complete"
name="a"
ajax="{{ajax}}"
colspan="{{3}}"
placeholder="请输入"
/>
<item
label="自定义图标"
node="auto-complete"
icon="x-icon-universally-serch"
name="b"
ajax="{{ajax}}"
colspan="{{3}}"
placeholder="可根据场景自定义显示图标"
/>
<item
node="auto-complete"
name="store"
colspan="{{6}}"
label="通过search callback 初始数据"
bindsearch="handleSearch"
bindchanged="handleChange"
/>
</form>
</module>
</page>
const data = Array.apply(null, { length: 1000 + 1 }).map(((item, index) => {
const value = index + 1;
return {
label: `李-${value}`,
value: value,
};
}));
export default XPage({
data: {
ajax: {
url: '//testapi-nodedmallos.dmall.com/cabinx/pcapi/select/options',
},
},
handleSearch(value, callback) {
const matched = data.filter(item => item.label.indexOf(value) !== -1);
callback(matched);
},
handleChange(value) {
console.info('value', value);
},
});
Attributes
| 属性 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| name | 名称 | String | -- | -- | PC/Mobile | -- |
| value | 绑定值 | String/Number | -- | -- | PC/Mobile | -- |
| ajax | 请求相关 | String/Object{url, params}/Function | -- | -- | PC/Mobile | -- |
| placeholder | 输入框占位文本 | String | -- | -- | PC/Mobile | -- |
| disabled | 禁用 | Boolean | -- | false | PC/Mobile | -- |
| icon | 头部图标 | String | -- | -- | PC/Mobile | -- |
| beforeRequest | 接口调用前执行，需要修改入参可在这里处理。 | Function | -- | -- | PC/Mobile | -- |
| beforeRender | 接口调用成功后，更新界面前执行，可在这里对接口返回的数据进行修改。 | Function | -- | -- | PC/Mobile | -- |
| loaded | 接口调用结束后执行，无论成功与否都会执行。 | Function | -- | -- | PC/Mobile | -- |
Attributes - Ajax
ajax为String类型时表示接口地址，是Object时可使用以下配置。
| 属性 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| url | 接口地址 | String | -- | -- | PC/Mobile | -- |
| params | 入参 | Object | -- | -- | PC/Mobile | -- |
Events
| 名称 | 说明 | 回调参数 | 端 | 版本 |
|---|---|---|---|---|
| changed | 值改变后触发 | (value, {}) | PC/Mobile | -- |
| search | 搜索补全项触发 | (value, callback) | PC | -- |