Ant Design - поиск ключа и значения в выборке

Question

Если у меня есть объект пользователя с отображаемым именем (например, «Джон Смит») и именем пользователя (например, «johsmi»), как я могу найти отображаемое имя и имя пользователя?

В этом примере поиск только по именам пользователей, то есть он найдет «johsmi», но не «Smith»:

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

В итоге я добавил отображаемое имя в атрибут ключа, чтобы сделать его доступным для поиска, но мне интересно, если это рекомендуемый способ сделать это:

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

Answer 1

Вы можете использовать filterOption реквизиты

  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>

Например: https://codesandbox.io/s/brave-bhabha-m5tuy