Ant Design - searching for both key and value in a select

Question

If I have a user object with a display name (e.g. "John Smith") and a username (e.g. "johsmi"), how can I search for both display name and username?

This example will only search for usernames, i.e. it will find "johsmi", but not "Smith":

<Select
  showSearch={true}
  optionFilterProp="children"
  placeholder="Select account"
>
  {users.map(user => (
    <Select.Option value={user.name}>
      {user.displayName}                        
    </Select.Option>
  ))}
</Select>

I ended up adding the display name in the key attribute to make it searchable, but I wonder if it's the recommended way of doing it:

<Select.Option key={user.displayName} value={user.name}>
  {user.displayName}                        
</Select.Option>

Solution 1

Try this:

filterOption={(input, option) =>
    option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
    option.props.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

Solution 2

You can use the filterOption props

  const person = [{
    username: 'jstuart123',
    displayName: 'John Stuart'
  }]

  <Select
    showSearch
    optionFilterProp="children"
    onSearch={onSearch}
    filterOption={(input, option) =>  
      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 
      || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    {person.map(p => <Option value={p.username}>{p.displayName}</Option>)}
  </Select>

Exemple: https://codesandbox.io/s/brave-bhabha-m5tuy

Solution 3

I also got an error when I tried the answers above. Actually I solved it like this.

filterOption={(input, option) =>
  option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
  option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

Comments

[AugDog]

Thank you! One of those option.values should be option.label to search both the label and value, though.

[Gavin Thomas]

This causes an error.

[rafaelncarvalho]

@GavinThomas which error?

[WW00WW]

@AugDog shouldn't it be option.children?

[James Tan]

im using with vuejs, and 1 way todo it is to add data-prop to a-select-option, and getting it via option.props[data-label'].toLowerCase()...

[okebinda]

@rafaelncarvalho For me it's a warning: 'Return type is option instead of Option instance. Please read value directly instead of reading from props.' To remove the warning remove props from the filterOption chain, like this: option.children.toLowerCase()...