如何使用Ant Design Auto Complete（React JS）搜索和查找表详细信息

Question

I am using ant design auto complete, vx is my Datasource array(all name list only) and empData is my table datasource .Here my problem is how to search and find the correct details from person name and how to write onSearch function when i select the name and press the search button?

<AutoComplete
    dataSource={vx}
    placeholder="type"
    onChange={this.handleChange
    onPressEnter={this.onSearch}
   filterOption={(inpvalueutValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />

 <Button type="primary" onClick={this.onSearch}>Search</Button>

This is my handleChange function

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

  }

This is my table

 <Table pagination={{ pageSize: 10 }} columns={columns}  dataSource={this.state.empData} />

Answer 1

Make this changes to your autocomplete and button tags, The dropdown was auto closing after option select. Try to handle the way you are doing it now. However, search is working fine.

handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        this.setState({ searchText: selectedKeys[0] });
      }

const dataSource1 = ['Amal', 'Chamika', 'Unknown'];

const columns = [{
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          filterDropdown: ({ setSelectedKeys, selectedKeys, confirm}) => (
            <div>
              <AutoComplete
                dataSource={dataSource1}
                placeholder="Search name"
                value={selectedKeys[0]}
                onChange={value => setSelectedKeys(value ? [value] : [])}
              />
            <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
            </div>
          ),
          filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
          onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
          render: (text) => text,
        }, {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        }, {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        }];