# 自动完成 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(keywords) {
      const restaurants = this.data

      const results = keywords
        ? restaurants.filter(v => v.text.includes(keywords))
        : []
      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
clearable 是否可以清空选项 boolean -- true
fetch-suggestions 搜索建议 (keywords: string) => Promise<Item[]> -- --

# AutoComplete 事件

事件 说明 参数
change 用户触发值改变事件 event.value: 当前选择的值
select 用户触发选择事件 {value,text}