Ant-design: Search function in multiple select box loops through values instead of labels.

Created on 15 Nov 2017 · 3Comments · Source: ant-design/ant-design

What problem does this feature solve?

I'm using a select input with a user_id as value and the username as label. When using the automatic search in multiselect modus, it's searching for an id/value instead of the username/label.

What does the proposed API look like?

It would be nice to give a parameter to the select input like:

Source

remyvanderwereld

Most helpful comment

As per the instructions, new issues should be created using http://new-issue.ant.design

optionFilterProp and filterOption allow you to manage how to filter the available options, i.e.

<Select
    showSearch
    optionFilterProp="children"
    filterOption={(input: any, option: any) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
   >
   ...
</Select>

The above will filter case insensitively filter the available options by label.

This is shown on the documentation https://ant.design/components/select/#components-select-demo-search

HTH

gavinrobertszeco on 15 Nov 2017

👍7

All 3 comments

As per the instructions, new issues should be created using http://new-issue.ant.design

optionFilterProp and filterOption allow you to manage how to filter the available options, i.e.

<Select
    showSearch
    optionFilterProp="children"
    filterOption={(input: any, option: any) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
   >
   ...
</Select>

The above will filter case insensitively filter the available options by label.

This is shown on the documentation https://ant.design/components/select/#components-select-demo-search

HTH

gavinrobertszeco on 15 Nov 2017

👍7

Thanks Gavin!

remyvanderwereld on 15 Nov 2017

👍1

Not a problem @remyvanderwereld

FYI, use the new-issue tool, as issues tend to get canned otherwise.

gavinrobertszeco on 15 Nov 2017

👍1