ant-design-vue/components/vc-select/demo/combobox.vue

<script>
import Select, { Option } from '../index'
import '../assets/index.less'

export default {
  data () {
    return {
      disabled: false,
      value: '',
    }
  },
  methods: {
    onChange (value, option) {
      console.log('onChange', value, option)
      this.value = value
    },

    onKeyDown (e) {
      if (e.keyCode === 13) {
        console.log('onEnter', this.value)
      }
    },

    onSelect (v, option) {
      console.log('onSelect', v, option)
    },

    toggleDisabled () {
      this.disabled = !this.disabled
    },
  },

  render () {
    return (<div>
      <h2>combobox</h2>
      <p>
        <button onClick={this.toggleDisabled}>toggle disabled</button>
      </p>
      <div style={{ width: '300px' }}>
        <Select
          disabled={this.disabled}
          style={{ width: '500px' }}
          onChange={this.onChange}
          onSelect={this.onSelect}
          onInputKeydown={this.onKeyDown}
          notFoundContent=''
          allowClear
          placeholder='please select'
          value={this.value}
          combobox
          backfill
        >
          <Option value='jack'>
            <b style={{ color: 'red' }}>jack</b>
          </Option>
          <Option value='lucy'>lucy</Option>
          <Option value='disabled' disabled>disabled</Option>
          <Option value='yiminghe'>yiminghe</Option>
        </Select>
      </div>
    </div>)
  },
}
</script>