antd中的select中的showSearch、 optionFilterProp=“children“ // 过

选择器 Select - Ant Design

三者配合使用！

在 Select 组件上设置了 showSearch 并配合使用 optionFilterProp 和 filterOption 时，组件将根据用户的输入动态过滤选项。

<Select
  placeholder="选择"
  style={{ width: "600px" }}
  value={Value}
  onChange={e => setValue(e)}
  showSearch  // 显示搜索框
  optionFilterProp="children"  // 过滤选项的属性值
  filterOption={(input, option) =>
     option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  }
>
  {List.map(item => (
     <Select.Option key={item.value} value={item.value}>
        {item.label}
     </Select.Option>
  ))}
</Select>

1、showSearch 的作用

• showSearch={true} 启用后，Select 组件会显示一个可输入的搜索框，用户可以在搜索框中输入文本来搜索选项。
• 只有在启用 showSearch 的情况下，optionFilterProp 和 filterOption 才会生效。

2、optionFilterProp

• 作用：指定用来过滤选项的属性。它决定了当你在搜索框中输入内容时，应该使用哪个选项的属性来进行匹配。

3、filterOption

• 作用：这是一个自定义过滤函数，用于定义如何对每个选项进行匹配。filterOption 可以接收两个参数：
  • input：用户在搜索框中输入的内容。
  • option：当前被过滤的选项。

4、optionFilterProp 和 filterOption 的关系

通过 filterOption，你可以实现更加复杂和定制化的匹配逻辑。例如，在代码中， option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 这个逻辑来判断 option 的 children 属性是否包含用户输入的值。

• optionFilterProp 指定了你要过滤的属性（在这个例子中是 children），即 filterOption 函数中的 option.children。
• filterOption 是一个自定义函数，它通过比较 input 和 option.children 来决定这个选项是否应该显示在过滤结果中。

5、举例子：以下可实现搜索过滤想要的下拉选项

<Select
  showSearch
  optionFilterProp="children"
  filterOption={(input, option) =>
    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  }
>
  <Select.Option value="1">Option One</Select.Option>
  <Select.Option value="2">Option Two</Select.Option>
  <Select.Option value="3">Option Three</Select.Option>
</Select>