CODEWITHSUNDEEP
reactjsreact-hooksantd
Heru Wijayanto
Heru Wijayanto

Reputation: 469

How to Searching with Antd in React Hooks

I have a select component on the form. and I tried to combine the search features in it. I have done an onchange on the component and it matches what I want, but I am confused to compare with the current data so that this search feature runs

this is my code

const searchChange = (data) => {
            search_value       = []
            let new_data       = _.cloneDeep(dataOpt)
            let keyword        = _.isString(data) ? data : null
            let fixed_data     = _.isEmpty(data) ? dataOpt : _.filter(new_data, u => _.toLower(u.email).indexOf(_.toLower(keyword)) > -1 )
            people_value = fixed_data
        }  

const peopleChange  = (data) => {
        people_value = data
        return people_value;
}

render:

<Form.Item label="People">
    <Select
        showSearch
        mode            = "multiple"
        placeholder     = "Choose People, you want inviting"
        onChange        = {(e) => peopleChange(e)}
        style           = {{ width: '100%' }}
        notFoundContent = {null}
        onSearch        = {(e) => searchChange(e)}
    >
        {!_.isNil(filteredOptions) && filteredOptions.map(item =>(
            <Select.Option key={Math.random()} value={item._id}>{item.email}</Select.Option> 
            ))  
        }
    </Select>
</Form.Item>

dataOpt format:

[
  {
    "_id": "5d22f0b56fc5841b7caacda5",
    "address": "",
    "status": "temporary delete",
    "email": "[email protected]",
    "name": "Monkey D Luffy",
    "phone": "1234"
  },
  {
    "_id": "5d26d9ccf2d1fc17b4d79ab1",
    "address": "",
    "status": "temporary delete",
    "email": "[email protected]",
    "name": "[email protected]",
    "phone": "12345"
  },
  {
    "_id": "5d2d2be4f471124ad4c0b019",
    "address": "",
    "status": "not verified",
    "email": "[email protected]",
    "name": "asdfff",
    "phone": "1234"
  }
]

Thanks in advance.

Upvotes: 0

Views: 1633

Answers (1)

Yash Joshi
Yash Joshi

Reputation: 2774

You can use filterOption prop to filter the data. Here is the example for your data: 

<Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    {data.map(item => <Option key={item._id} value={item.email}>{item.email}</Option> )}
  </Select>

Upvotes: 1

Related Questions