el-autocomplete 必须点选结果

有一个项目，输入时候提示可用项，但是必须用户选择下面的可用项；可能有人会说为啥不用下拉框，嗯，项目太多了，下拉框承载不了，而且操作不够快捷。

然而，在autocomplete里设必填（required）的话，只要文本框有值就通过了，不能验证到是否用户点选的。后用了个很简单（自定义验证）的方法实现了。废话不多说，上代码

模板：没什么特别

    <el-autocomplete
            v-model="username"
            name="username"
            class="inline-input"
            placeholder="请输入账号"
            :highlight-first-item="true"
            :trigger-on-focus="false"
            :fetch-suggestions="getUser"
            @select="handleSelectUser"
          />

js

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (this.authz.id === 0) {
        callback(new Error('请选择账号！'))
      } else {
        callback()
      }
    }
    return {
      authzRules: {
        username: [
          { trigger: 'blur,change', message: '请选择账号！', validator: validateUsername },
          { trigger: 'blur,change', message: '请选择账号！', required: true }
        ]
      },
      authz: { // authz role form
        id: 0,
        username: undefined,
        roleIds: []
      }
   }
}

其中
规则1，就是判断下没id时候（点选时候通过handleSelectUser设置authz的id)就是没选账号
规则2，只是为了保持页面样色一致（required会生成个必填的*号）