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>