如何使用 ant design auto complete(react js) 搜索和查找 table 详细信息

Question

我正在使用 ant design 自动完成，vx 是我的数据源数组（仅限所有姓名列表），empData 是我的 table 数据源。我的问题是如何从人名中搜索和找到正确的详细信息以及当我 select 名称并按下搜索按钮时如何编写 onSearch 函数？

<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>

这是我的 handleChange 函数

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

  }

这是我的table

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

Answer 1

对您的自动完成和按钮标记进行此更改，下拉列表在选项 select 后自动关闭。试着用你现在的方式来处理。但是，搜索工作正常。

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',
        }];

如何使用 ant design auto complete(react js) 搜索和查找 table 详细信息

How to search and find table details using ant design auto complete(react js)

javascript

reactjs

antd