antd 请问一下使用select如何实现既可以像input那样支持输入，又可以从下拉中选择?

Question

请问一下使用select如何实现既可以像input那样支持输入，又可以从下拉中选择。
不可以多选，使用tags属性的时候会支持多选

<Select
                           
                            tags
                            placeholder="请选择一个设备组或输入选择新建设备组">
                            <Option value="china">China</Option>
                            <Option value="use">U.S.A</Option>
                        </Select>

这样会默认多选，如何才能使代码不支持多选

Answer 1

<Select
  combobox
  style={{ width: '100%' }}
  onChange={this.handleGroupChange}
  tabIndex={0}
>
...
</Select>

Answer 2

新版中Select组件废弃了combobox模式，可以使用AutoComplete组件代替。

Answer 3

使用AutoComplete组件 很友好 完全满足需求
<AutoComplete

      
        onBlur={this.onAgreement}
        >
        {enterpriseList.length
          ? enterpriseList.map((enterprise) => {
              const res = (
                <AutoComplete.Option value={enterprise.rName}>
                  {enterprise.rName}
                </AutoComplete.Option>
              );
              return res;
            })
          : null}
      </AutoComplete>

Answer 4

我没用过 antd 但是 官网不是有么？
https://ant.design/components...
找到 带搜索框

import { Select } from 'antd';
const Option = Select.Option;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={handleChange}
    filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>
, mountNode);

Answer 5

bootstrap-select
http://silviomoreto.github.io...

Answer 6

 <Select
    value={this.state.value}
    showSearch
    style={{width: 200}}
    onSearch={(value)=>this.setState(value)}>
    <Option value={1}>1</Option>
    <Option value={2}>2</Option>
</Select>

用onSearch事件可以，onChange在手动输入是不会触发

Answer 7

<AutoComplete

dataSource={arr.map((item => (
<Option value={item.value}>{item.title}</Option>
)))}
children={<Input type="number" maxlength="3" suffix="min" />}

/>

Answer 8

单选可以用AutoComplete，多选可以用tags Select

<Select
  allowClear
  mode="tags"
  tagRender={tagProps => renderSelectTag(tagProps)}
  onChange={(value = []) =>{}}
>
  {options.map(item => (
    <Select.Option value={item.value} key={item.value}>
      {item.label}
    </Select.Option>
  ))}
</Select>