CODEWITHSUNDEEP
javascriptreactjsfrontendant-design-pro
Faizan Ahmad
Faizan Ahmad

Reputation: 382

Search Ant Design Tree Select by Title

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

Upvotes: 8

Views: 7608

Answers (4)

Akram Rabie
Akram Rabie

Reputation: 545

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...

Upvotes: 0

Danf
Danf

Reputation: 1569

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.

Upvotes: 19

Oliver
Oliver

Reputation: 93

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.

Upvotes: 5

Igor Shcherba
Igor Shcherba

Reputation: 146

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;
      }}
/>

Upvotes: 12

Related Questions