Поиск и подстановка значения из БД в форму внесения данных
начинаю освоение связки Postgres + php + JS ( от него видимо никуда не деться) + bootstrap. Вопрос скорее относится к стандартным и шаблонным, но второй день не могу его сформулировать и найти пример кода для вдохновения. Буду благодарен опытным товарищам за пинок в нужную сторону.
В Postgres создана БД с двумя таблицами ( клиенты / заказы ) данные на страницу вроде бы выводятся из поиска в таблицу / отправляются из формы ввода.
На данный момент форма создания заказа состоит из полей заполняемых вручную что не очень оптимально поскольку в процессе породит дубли например в наименовании клиента <ООО "Ромашка"> и <ООО Ромашка> следовательно значение в поле "клиент" необходимо добавлять из существующих значений ( из таблицы клиент, где средствами БД например по primary key ИНН избегаю дубликатов). Аналогичным образом формируются поля заказа "товар" по ID.
В текущей концепции "дизайна" и "логики" формы заказа к полю "клиент" относится кнопка поиска при нажатии которой в модальном окне силами php по одному нескольким критериям например "название" или "инн" из таблицы "клиенты" в таблицу подгружается соответствующие критериям строки клиентов. Далее чекбоксом / кнопкой "выбрать" данные выбранного клиента вносятся в основную форму запроса.
На данный момент это реализовано криво и супер костылем, когда результат поиска ( таблица с несколькими значениями) выводится ниже формы запроса и ID необходимого клиента нужно вручную скопипастить в форму запроса.
Как один из вариантов решения нашел использование JS Autocomplete с выборкой значений из таблицы "клиенты" и выводом как в поле как select, но хоть сервис сугубо для локального 5-6 человек максимум использования, что то мне подсказывает подобный метод тоже костыль и будет создавать излишнюю нагрузку на сервер БД и путь в никуда.
Подскажите пожалуйста возможное направление куда копать. Насколько я понимаю решение выглядит как JS кнопка открытия модального окна - тут понятно поля поиска + таблица вывода данных из БД ( php + AJAX чтобы избежать перезагрузки основной страницы кнопка "выбрать"/"добавить" - JS - закрытие модального окна + подстановка выбранного значение в поле формы "клиент"
PSS для наглядности набросал содержимое и логику окон кратко
1)Пользователь нажал кнопку <Найти в БД> в форме (1)
2)Открылось модальное окно (2)
3)По названию в таблицу выводится список клиентов из БД
4)Как подсказали ниже либо c помощью ClickOnRow либо чекбоксом выбирается нужная строка и данные из нее подставляются в форму (3)
- Заполненная форма отправляется в БД.
Ответы (1 шт):
Различные варианты, самые часто встречаемые вы описали.
- Выбор в модальном окне из справочника
Есть кнопка, при клике на ней открывается модальное окно. Там таблица, где есть постраничная навигация, поля поиска и возможность выбрать запись. Чекбокс неудобен, лучше регистрировать клик на всю строчку целиком. Нажали выбрать, запросили данные с бека и подставили в форму нужные значения.
- Выпадающий список с автозаполнением
Упомянутый Autocomplete один из них. Если переживаете за бек, есть несколько способов оптимизации. Запрашивать только когда введено не менее нескольких символов, если система позволяет и там нет одно- и двухбуквенных значений. Запрашивать только первые 10 совпадений, остальное по мере уточнения данных в текстовом поле.
Комбинированный подход, ничто не мешает иметь два вышеперечисленных способа ввода.
Можете допилить свой костыль, вам не хватает только по клику на строчке таблицы, копировать автоматом данные в форму. Есть еще такая вещь, как конструктор форм, где человек пошагово выбирает значения. Тоже один из вариантов.
Но в общем первых двух хватает под большинство задач, на сайтах вы только их и встретите. Готовые компоненты ищутся достаточно просто. Впрочем, вы уже подключили bootstrap, следовательно можете и его компоненты взять.