antd vue a-select 可输可选

模糊搜索数据并且搜索值与数据的值完全一致才会失去焦点就选中第一个

vue.js

<a-select
  show-search
  v-model="form.value"
  :not-found-content="null"
  :filter-option="true"
  option-filter-prop="label"
  @search="searchL"
  @change="changeL"
  @blur="blurL"
  placeholder="请选择"
  style="width: 100%"
  allow-clear
>
  <a-select-option :value="1" label="苹果1"> 苹果1 </a-select-option>
  <a-select-option :value="2" label="苹果2"> 苹果2 </a-select-option>
  <a-select-option :value="3" label="苹果3"> 苹果3 </a-select-option>
</a-select>

data() {
    return {
      isSearch: false, // 是否触发搜索
      searchStr: '', // 搜索内容
      // 表单参数
      form: {
        value: undefined,
      },
    }
  },

    // 搜索
    searchL(val) {
      console.log('🚀 ~ searchName:', val)
      if (val) {
        this.form.value = val
        this.isSearch = true
        this.searchStr = val
      }
      console.log('searchName', this.form.value)
    },
    // 失焦
    blurL(val) {
      console.log('🚀 ~ blurName:', val, this.form.value )
      if (val == this.form.value ) {
        this.form.value= val
      }
      this.isSearch = false
      this.searchStr = ''
      console.log('blurL', this.form.value)
    },
    changeL(val, option) {
      console.log('changeL', val, option, this.searchStr)
      if (this.isSearch && option) {
        if (option.componentOptions.propsData.label == this.searchStr) {
          this.form.value = option.componentOptions.propsData.value
        } else {
          this.form.value = this.searchStr
        }
      }
    },