Improve attach volume/label tree input

[mzur]

Currently the attach label tree (and volume) input of the project overview loads a complete list of available label trees on the focus event and then a typeahead is used to search and select the label tree. This has two problems:

1. The input loses focus again after the label trees were loaded. The user has to focus the element again afterwards.

2. There may be many label trees or volumes with similar names. If the user searches for generic "fauna", for example, the label tree may not show up in the top 5 of the typeahead results.

To fix these issues, implement a fuzzy search API endpoint for label trees. The endpoint is queried after the user has entered at least 4 characters and stopped typing for 500 ms (?). As long as the user is not typing, up to 50 returned label trees are shown in a (scrollable) dropdown.

[lehecht]

@mzur

1. The input loses focus again after the label trees were loaded. The user has to focus the element again afterwards.

When I click on the input to emit the focus event it remains focused after it finished loading. Or did you mean something different?

[mzur]

This issue was originally meant for the label tree input but there was an error in the description. Now the volume and label tree inputs both should be updated.

[lehecht]

@mzur
How should the fuzzy search be implemented?
Should it be a simple fuzzy search by using the SQL operaor LIKE or should I use the Levenshtein distance with a given threshold for the maximal number of differences?

[mzur]

Do whatever you think works best 😉 The only important thing is that it should work in a DB query (i.e. you don't have to fetch all the data from the DB and process it with PHP).