Автозаполнение содержимого после канала с использованием javascript или JQuery

У меня есть поле ввода или текстовая область, в которую пользователи вводят такой контент, как:

what is the best restaurant in Boston|City Massachusetts|State

Когда пользователь вводит символ |, я хочу, чтобы при их вводе появлялось всплывающее окно с предложенными метками для автозаполнения. По мере ввода пользователя слово Ci, City будет всплывать, и они могут стрелкой вниз или вверх, выбрать City и нажать Enter, завершив текст и добавив пробел для следующего слова.

Я подозреваю, что это похоже на то, как можно автозаполнить адреса электронной почты или упоминания, но эти плагины имеют довольно сильные ограничения на интервалы и поля ввода.

У кого-нибудь есть идеи плагинов или кода, которые позволили бы это сделать?