Несколько примеров
1.
Один из самых простых
2.
Библиотека, если настроить её под себя, я думаю Вы получите описанный эффект
3.
Автодополнение (просто пример автодополнения)
То, что Вы ищите называется либо "ComboBox", либо "Автодополнение" (Autocomplete), библиотек и вариаций на эту тему целая прорва.
Из личного опыта - если Вы делаете проект не "от делать нечего" - рекомендую не злоупотреблять кол-вом библиотек в проекте. Либо делайте проще и самостоятельно, либо подбирайте какой-нибудь фреймворк который удовлетворит максимальное кол-во потребностей проекта (различных UI-фреймворков благо целый воз и маленькая тележка). Уже через несколько месяцев после их внедрения, при большом кол-ве библиотек, какая из них зачем и что делает - разобраться будет сложно даже автору кода...
P.S.
И еще момент, как сделать так что бы в конце подставлялось "руб". Сразу после цифры
добавить к элементу (например
<div>'у) в котором содержится число другой элемент, например
:after { content: 'rub'; } Показать "на пальцах" к сожалению сейчас не имею возможности, но готовых примеров подобного - просто масса. Например по ссылке выше #2, когда добавляется тег - у него в конце есть крестик, по такому же принципу можно добавить "руб.", либо же добавить к самому INPUT'у боковое поле (как это например умеет делать Bootstrap) с нужным суффиксом.
Простой
