In my opinion this looks great on the desktop, but on mobile devices it is a bit hard to select one of the suggestions. It isn't as great as the native select popup on android or iOS, for example:
However, this native support does not provide dynamic autocomplete support.
Sematically speaking, the correct element to use would be a
select because we are selecting something from a closed source of elements. However this elements seems to be pretty "static" as it does not allow one to filter the collection of options, for example. I understand that is why most people implement this as a text field + suggestions.
The excellent Select2 library tries to mitigate this, but the symptons are more or less the same regarding responsiveness.
What is the recommended UI pattern to use in these cases?
Perhaps the only solution would be to make "searchable select boxes" a part of the HTML standard?