# Current situation

We have many different implementations of autocompleters. All of them behave differently and allow different inputs.

### Pain

* Different implementations are hard to maintain/extend
* Different Inputs Begin of the insertion(name, type, functionality etc)End of the insertion making them hard to use in the code
* Different behaviour results in incosistencies in the UI

# Proposed solution

* One `op-autocompleter` component which is the only component allowed to call `ngSelect`.
* Thus it is easier to react to changes in `ngSelect` or (maybe) replace it in the future Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * Begin of the insertionItEnd of the insertion Begin of the deletion One `base-autocompleter` component whichEnd of the deletion defines all allowed inputs and basic functions
* Specific autocompleters for each component (e.g. `user-autocompleter`, `project-autocompleter`, `work-package-autocompleter`, etc)
* They inherit from the `base-autocompleter` and only define additional functions needed for their specific use case
* Begin of the insertionAsEnd of the insertion Begin of the deletion InEnd of the deletion the template, they use the Begin of the insertion`op-autocompleter.html`
* If needed, they provide customEnd of the insertion Begin of the deletion `op-autocompleter` providing (if needed) additionalEnd of the deletion templates Begin of the insertionas separate components which can be applied byEnd of the insertion Begin of the deletion forEnd of the deletion the Begin of the insertion`applyTemplate` method of the `op-autocompleter`

## List of autocompleters to check (and transfer)

* [x] user-autocompleter
* [x] member-autocompleter
* [x] project-autocomplater
* [ ] work-package-autocompleter
* [ ] create-autocompleter
* [ ] te-autocompleter
* [ ] version-autocompleter
* [ ] draggable-autocompleter
* [ ] colors-autocompleter
* [ ] relations-autocompleter
* [ ] board-inline-add-autocompleter
* [ ] Places where `ng-select` is called directly (without a dedicated component around it)

## Out of scope

* due to complexity and plans to rework it soon: SearchEnd of the insertion Begin of the deletion ngSelect depending on their use caseEnd of the deletion