# 自动完成 AutoComplete
# 基础用法
基本用法
从服务端搜索数据
<title>基本用法</title>
<describe>从服务端搜索数据</describe>
<template>
<hc-autocomplete
placeholder="请输入建议"
v-model="value"
:fetch-suggestions="handleFetchSuggestions"
@change="handleChange"
@select="handleSelect"
style="width: 300px"
>
</hc-autocomplete>
</template>
<script>
export default {
data: function () {
return {
value: 'Hot honey 首尔炸鸡（仙霞路）',
selectItem: null,
view: false,
data: [
{ text: '三全鲜食（北新泾店）', value: '长宁区新渔路144号' },
{
text: 'Hot honey 首尔炸鸡（仙霞路）',
value: '上海市长宁区淞虹路661号'
},
{
text: '新旺角茶餐厅',
value: '上海市普陀区真北路988号创邑金沙谷6号楼113'
},
{ text: '泷千家(天山西路店)', value: '天山西路438号' },
{
text: '胖仙女纸杯蛋糕（上海凌空店）',
value: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101'
},
{ text: '贡茶', value: '上海市长宁区金钟路633号' },
{
text: '豪大大香鸡排超级奶爸',
value: '上海市嘉定区曹安公路曹安路1685号'
},
{
text: '茶芝兰（奶茶，手抓饼）',
value: '上海市普陀区同普路1435号'
},
{ text: '十二泷町', value: '上海市北翟路1444弄81号B幢-107' },
{ text: '星移浓缩咖啡', value: '上海市嘉定区新郁路817号' },
{ text: '阿姨奶茶/豪大大', value: '嘉定区曹安路1611号' },
{ text: '新麦甜四季甜品炸鸡', value: '嘉定区曹安公路2383弄55号' },
{
text: 'Monica摩托主题咖啡店',
value: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F'
},
{
text: '浮生若茶（凌空soho店）',
value: '上海长宁区金钟路968号9号楼地下一层'
},
{ text: 'NONO JUICE 鲜榨果汁', value: '上海市长宁区天山西路119号' },
{ text: 'CoCo都可(北新泾店）', value: '上海市长宁区仙霞西路' },
{
text: '快乐柠檬（神州智慧店）',
value: '上海市长宁区天山西路567号1层R117号店铺'
},
{
text: 'Merci Paul cafe',
value: '上海市普陀区光复西路丹巴路28弄6号楼819'
},
{
text: '猫山王（西郊百联店）',
value: '上海市长宁区仙霞西路88号第一层G05-F01-1-306'
},
{ text: '枪会山', value: '上海市普陀区棕榈路' },
{ text: '纵食', value: '元丰天山花园(东门) 双流路267号' },
{ text: '钱记', value: '上海市长宁区天山西路' },
{ text: '壹杯加', value: '上海市长宁区通协路' },
{
text: '唦哇嘀咖',
value: '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元'
},
{ text: '爱茜茜里(西郊百联)', value: '长宁区仙霞西路88号1305室' },
{
text: '爱茜茜里(近铁广场)',
value:
'上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺'
},
{
text: '鲜果榨汁（金沙江路和美广店）',
value: '普陀区金沙江路2239号金沙和美广场B1-10-6'
},
{
text: '开心丽果（缤谷店）',
value: '上海市长宁区威宁路天山路341号'
},
{ text: '超级鸡车（丰庄路店）', value: '上海市嘉定区丰庄路240号' },
{ text: '妙生活果园（北新泾店）', value: '长宁区新渔路144号' },
{ text: '香宜度麻辣香锅', value: '长宁区淞虹路148号' },
{
text: '凡仔汉堡（老真北路店）',
value: '上海市普陀区老真北路160号'
},
{ text: '港式小铺', value: '上海市长宁区金钟路968号15楼15-105室' },
{ text: '蜀香源麻辣香锅（剑河路店）', value: '剑河路443-1' },
{ text: '北京饺子馆', value: '长宁区北新泾街道天山西路490-1号' },
{
text: '饭典*新简餐（凌空SOHO店）',
value: '上海市长宁区金钟路968号9号楼地下一层9-83室'
},
{
text: '焦耳·川式快餐（金钟路店）',
value: '上海市金钟路633号地下一层甲部'
},
{ text: '动力鸡车', value: '长宁区仙霞西路299弄3号101B' },
{ text: '浏阳蒸菜', value: '天山西路430号' },
{ text: '四海游龙（天山西路店）', value: '上海市长宁区天山西路' },
{
text: '樱花食堂（凌空店）',
value: '上海市长宁区金钟路968号15楼15-105室'
},
{ text: '壹分米客家传统调制米粉(天山店)', value: '天山西路428号' },
{
text: '福荣祥烧腊（平溪路店）',
value: '上海市长宁区协和路福泉路255弄57-73号'
},
{
text: '速记黄焖鸡米饭',
value: '上海市长宁区北新泾街道金钟路180号1层01号摊位'
},
{ text: '红辣椒麻辣烫', value: '上海市长宁区天山西路492号' },
{
text: '(小杨生煎)西郊百联餐厅',
value: '长宁区仙霞西路88号百联2楼'
},
{ text: '阳阳麻辣烫', value: '天山西路389号' },
{
text: '南拳妈妈龙虾盖浇饭',
value: '普陀区金沙江路1699号鑫乐惠美食广场A13'
}
]
}
},
methods: {
handleFetchSuggestions: function(keywords) {
var restaurants = this.data
var results = keywords
? restaurants.filter(v => v.text.includes(keywords))
: []
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(results)
}, 300)
})
},
handleChange: function (evt) {
console.log(evt)
},
handleSelect: function (evt) {
console.log(evt)
}
}
}
</script>
# 搜索建议数组对象格式
配置fetch-suggestions 方法后，必须返回一个标准Promise对象，组件会进入加载状态。
上例使用setTimeout模拟异步场景，执行成功后必须resolve，结果数组格式如下：
[
{
value: '被组件使用的值',
... // 其他属性
}
]
其他属性：选中搜索建议项目后，可在select事件方法内获取到其他属性。
value属性名称也可通过为组件配置id-field属性修改，一般不建议修改。后端dto使用value名称即可。
# 属性及事件
# AutoComplete 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
v-model | 当前值，支持v-model方式使用 | string | -- | -- |
placeholder | 为空提示 | -- | -- | -- |
viewable | 是否查看状态 | boolean | -- | false |
disabled | 是否禁用 | boolean | -- | false |
clearable | 是否可以清空选项 | boolean | -- | true |
fetch-suggestions | 搜索建议 | (keywords: string) => Promise<Item[]> | -- | -- |
# AutoComplete 事件
| 事件 | 说明 | 参数 |
|---|---|---|
change | 用户触发值改变事件 | event.value： 当前选择的值 |
select | 用户触发选择事件 | {value,text} |
登录