Search Ant Design Tree Select by Title

Question

By default Tree select of Ant design search by value, is there a way to search by title? I have tried using onSearch function but it doesn't change any behavior of Tree Select

Answer 1

Just to elaborate on the answer provided by @Oliver, you can add the following props:

<TreeSelect

  showSearch
  treeNodeFilterProp='title'
  treeData={treeData}
  ...

/>

You can use the filterTreeNode prop to provide a custom filter function, but for standard functionality it should not be needed.

Answer 2

You can search by title, or any other fields of your treeData item, there is a callback prop filterTreeNode for that purpose

Example:

<TreeSelect
 treeData={data}
 filterTreeNode={(search, item) => {
        return item.title.toLowerCase().indexOf(search.toLowerCase()) >= 0;
      }}
/>

Answer 3

There's actually a better and simpler way to do it by providing treeNodeFilterProp, which is directly used for filtering. Its default value is 'value' and you can simply change it to 'title' to achieve the desired behaviour.

Answer 4

This might be a little late but you could simply use treeNodeFilterProp property of TreeSelect:

 <TreeSelect
  treeData={data}
  treeNodeFilterProp="title"
 />

So it'll search on titles.

The documentation is not good for this component...