element实现input搜索提示以及多选

接到一个需求，做一个筛选功能，要求门店多选，并且有搜索提示
最后的效果图如下

多选的功能还是比较简单的，element有一个tag标签，直接把选中的值push到tag数组就可以了，给后台返回，只需要返回选中的tag标签的数据就好

至于搜索提示，以前没有做过，所以做下记录

在官网，给了一个demo，在demo中，有这么一个钩子

 mounted() {
  this.restaurants = this.loadAll();
}

回显的数据是直接写到loadAll中的，但是，我们的数据是请求以后才能拿到，那么我们就直接在拿到数据后再调用cakkback()不就好了吗
记住，选择的时候，绑定的是返回的数据的value，如果你的标题是其他的字段，就用map()方法重新处理一下就好，比如你查询到的数据结构是这样子

{
	id: 1,
	name: 'xxx省xxx市xxx区',
	...
}

但是在官方文档中，却是需要value

那么你只需要map()处理一下，新增一个value字段，让他等于name就好了

// html
<el-form-item label="门店">
    <el-autocomplete
        clearable
        class="inline-input"
        v-model.trim="storeSearchMsg.shopName" 
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleInputAddress"
        style="width:370px; margin-left: 30px"
    ></el-autocomplete>
</el-form-item>

// js
querySearch(queryString, callback) {
    let storeName = queryString
    // 获取数据的方法
    listStoreLikeName(storeName).then( res=>{
        if (res.errCode == 0) {
        // 重新处理一下数据，新增一个value
            this.restaurants = res.data.stores.map(item=>{
                item.value = item.name
                return item
            })
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            // 如果是后端给你做了筛选匹配，就直接callback(this.restaurants)就完事了，不需要再去filter一次
            callback(results);
        }else {
            this.$message.error(res.msg)
        }
    })
},

最后，搞定，至于其他的坑，因为没有需求，所以暂时没有遇到，如果遇到了，我就继续在这个基础上更新一下就是