# Context

This is an the follow-up of <mention class="mention" data-id="62667" data-type="work_package" data-text="##62667">##62667</mention> and at the same time the preparation for <mention class="mention" data-id="63321" data-type="work_package" data-text="##63321">##63321</mention>&nbsp;

# Acceptance criteria

## Anatomy

* There is a new component called `FilterableTreeView`

* It consists of

* A search field at the top (basically a text field with leading search icon)

* A `TreeView` component below


## Behaviour

**TreeView**

* The `TreeView` behaves normally (as specified in ##62667)

* it supports two loading strategies (static and dynamic)

* it supports multi-select for the static loading strategy

* it supports leading and trailing visuals

* it supports leading actions

* etc.


**Search field**

* When searching for a string in the text field with **static loading strategy:**

* The component itself filters the tree view for exact matches of the string

* If mutli-select is activated, the selection is kept

* When searching for a string in the text field with **dynamic loading strategy:**

* There is a new request send to get all items that match the string

* If a leaf matches the search, but the node does not, the whole hiearchy of the leaf is shown and those items that do not match the string are disabled (so greyed out and not clickable)

* The letters that match the search string are highlighted in a different color in each found tree view item


## Use case

tbd

**Option 1**

* This new component will be used as the new Begin of the insertiontransversal/globalEnd of the insertion Begin of the deletion  globalEnd of the deletion project selector


**Option 2**

* Use is Begin of the insertioninEnd of the insertion Begin of the deletion it somehow onEnd of the deletion the Begin of the insertionadmin settings as a way of selecting projects in which to enable a certain object, like a project attribute, type or custom field.

* Eg. In Administration → Projects → ProjectEnd of the insertion Begin of the deletion admin/projectEnd of the deletion attributes Begin of the insertion→ {one attribute} → Projects tab (the same pattern exists in other admin pages like Custom fields and Types)


End of the insertion Begin of the deletion page.


End of the deletion ## Open questions:

* Which use case should we use?

* With multi-select activated

* When I filter and select a parent node: Should all items of the parent be selected or only the visible ones?

* When I already selected some items and filter afterwards, will the hidde items still be part of the form data?