bootstrap: создать выпадающий список с множественным выбором, например, Semanti c UI - PullRequest
0 голосов
/ 30 апреля 2020

Я пока не нашел решения для следующей ситуации:

searchbar multiselect

Я создал свой сайт на bootstrap. Теперь фреймворк великолепен и полезен, только мне не хватает аккуратной панели поиска с опциями множественного выбора.

На рисунке выше показан тот, который у меня есть сейчас. Это группа ввода с добавленными кнопками. Я обнаружил, что в пользовательском интерфейсе Semanti c имеется хороший выпадающий компонент с несколькими выборками.

пример можно посмотреть здесь в разделе «Выбор нескольких запросов»: https://semantic-ui.com/modules/dropdown.html

Добавить это прямо в мой код легко, но что нет (по крайней мере для меня), так это создать панель поиска, подобную той, что на картинке выше.

вход с добавленными кнопками (одна для дальнейших опций и кнопка поиска).

То, чего я хочу добиться, - это выполнить поиск в моей базе данных (с Ajax, которая сейчас работает нормально) и отобразить множественные выборки в моем поле ввода / выбора.

multiselect semantic ui

Это должно выглядеть так, как показано выше. Теперь есть версия группы ввода в пользовательском интерфейсе Semanti c (https://semantic-ui.com/elements/input.html), но это не множественный выбор, как моя панель поиска вверху.

Как создать семантичный выбор с множественным выбором c UI-версия моей bootstrap панели поиска без переключения всего сайта на semanti c ui? он должен вести себя как выпадающий список с несколькими выборками из semanti c ui (как при отображении отформатированного HTML результата в выпадающем списке, из которого я могу выбрать) и отправлять через AJAX уникальный URL-адрес (с опцией меню «глобус») рядом с кнопкой поиска).

Буду признателен за любую помощь. спасибо

1 Ответ

0 голосов
/ 30 апреля 2020

Если вы не зависите от указанного плагина c, вы можете использовать select2:

https://select2.org/selections -> поиск по нескольким значениям или по нескольким
https://select2.org/data-sources/ajax -> когда вам нужно использовать ajax

Отредактировано : вы можете использовать select2- bootstrap -theme
https://select2.github.io/select2-bootstrap-theme/4.0.3.html

...