Ant Design - recherche de la clé et de la valeur dans une sélection

Question

Si j'ai un objet utilisateur avec un nom d'affichage (par exemple, "John Smith") et un nom d'utilisateur (par exemple, "johsmi"), comment puis-je rechercher à la fois le nom d'affichage et le nom d'utilisateur ?

Cet exemple ne recherchera que les noms d'utilisateur, c'est-à-dire qu'il trouvera "johsmi", mais pas "Smith" :

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

J'ai fini par ajouter le nom d'affichage dans l'attribut clé pour qu'il soit possible d'effectuer des recherches, mais je me demande si c'est la manière recommandée de procéder :

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

Answer 1

Vous pouvez utiliser le filterOption accessoires

  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

Answer 2

Essayez ça :

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

Answer 3

J'ai également obtenu une erreur lorsque j'ai essayé les réponses ci-dessus. En fait, j'ai résolu le problème de la manière suivante.

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

Answer 4

// add the "filterOption" props to the ant design Select component
filterOption={(input, option) =>
  // make sure that the value and key is not null 
  option.props.value !== null
  && toLower(option.props.value).includes(toLower(input))
  ||
  option.props.key !== null
  &&
  toLower(option.props.key).includes(toLower(input))
}

// here is what the "toLower" function looks like just to convert string to lower case
toLower = (value) => {
  return value.toLowerCase()
}