Ant Design - 在选择中搜索键和值答案

【问题标题】：Ant Design - searching for both key and value in a selectAnt Design - 在选择中搜索键和值
【发布时间】：2020-01-09 09:53:06
【问题描述】：

如果我有一个带有显示名称（例如“John Smith”）和用户名（例如“johsmi”）的用户对象，如何同时搜索显示名称和用户名？

这个例子只会搜索用户名，即它会找到“johsmi”，而不是“Smith”：

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

我最终在 key 属性中添加了显示名称以使其可搜索，但我想知道这是否是推荐的做法：

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

【问题讨论】：

标签： javascript reactjs antd

【解决方案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

【讨论】：

这会导致错误。
@GavinThomas 哪个错误？

【解决方案2】：

我在尝试上述答案时也遇到了错误。其实我是这样解决的。

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

【讨论】：

谢谢！不过，option.values 之一应该是 option.label 以同时搜索标签和值。
@AugDog 不应该是option.children吗？

【解决方案3】：

试试这个：

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

【讨论】：

im 与 vuejs 一起使用，一种方法是将 data-prop 添加到 a-select-option，并通过 option.props[data-label'].toLowerCase().. .

【解决方案4】：

最适合我，请参考issue

<Select
  allowClear
  filterOption={(inputValue, option) =>
    option.props.children
      .toString()
      .toLowerCase()
      .includes(inputValue.toLowerCase())
  }
  showSearch
>
  {options.map(option=> (
    <Option key={option.id}>{option.name}</Option>
  ))}
</Select>

【讨论】：

【解决方案5】：


// 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()
}

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：