Как сделать вот такой вот инпут?

Собственно, подскажите направление в котором рыскать)) Надо сделать вот такой вот инпут))) В котором можно и вписать и выбрать из списка. Или может быть подскажите какие нибудь готовые библиотеки. И еще момент, как сделать так что бы в конце подставлялось "руб". Сразу после цифры
5f4f3fe6a0206237323442.png
  • Вопрос задан
  • 482 просмотра
Решения вопроса 2
Wolfnsex
@Wolfnsex Куратор тега CSS
Если не хочешь быть первым - не вставай в очередь!
Несколько примеров
1. Один из самых простых
2. Библиотека, если настроить её под себя, я думаю Вы получите описанный эффект
3. Автодополнение (просто пример автодополнения)

То, что Вы ищите называется либо "ComboBox", либо "Автодополнение" (Autocomplete), библиотек и вариаций на эту тему целая прорва.

Из личного опыта - если Вы делаете проект не "от делать нечего" - рекомендую не злоупотреблять кол-вом библиотек в проекте. Либо делайте проще и самостоятельно, либо подбирайте какой-нибудь фреймворк который удовлетворит максимальное кол-во потребностей проекта (различных UI-фреймворков благо целый воз и маленькая тележка). Уже через несколько месяцев после их внедрения, при большом кол-ве библиотек, какая из них зачем и что делает - разобраться будет сложно даже автору кода...

P.S.
И еще момент, как сделать так что бы в конце подставлялось "руб". Сразу после цифры
добавить к элементу (например <div>'у) в котором содержится число другой элемент, например :after { content: 'rub'; } Показать "на пальцах" к сожалению сейчас не имею возможности, но готовых примеров подобного - просто масса. Например по ссылке выше #2, когда добавляется тег - у него в конце есть крестик, по такому же принципу можно добавить "руб.", либо же добавить к самому INPUT'у боковое поле (как это например умеет делать Bootstrap) с нужным суффиксом.
Ответ написан
Комментировать
develx
@develx Куратор тега CSS
Web developer
Ненененене, не автокомплит!!!! Никаких аяксов. Просто у меня допустим 10 option с 100, 1000, 10000, 100000 и т.д. Которые можно выбрать, но и так же я могу вписать 12323002 любую сумму.

Значит вам нужен datalist для input
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы