Добро пожаловать на ТАК! Я являюсь руководителем отдела проектирования в Insrify, и моя команда и я «изобрели» этот тип ввода (мы называем его «выбор нескольких тегов») для нашего веб-сайта. Это был непростой процесс, потому что мы никогда не видели ничего подобного, поэтому мы создали собственный код для обработки большинства функций.
Я постараюсь объяснить это в меру своих возможностей, чтобы вы могли создать нечто подобное для вашего продукта.
Компонент в основном состоит из:
- отзывчивый выбор входа
- теги ввода,
- многомерная модель / структура данных и
- контроллер для управления всем этим
Мы используем API для сбора данных в разных точках, и мы кэшируем данные на сервере, чтобы ускорить его, но ничего из этого не относится к этому вводу, поэтому я не буду подробно описывать, как это обрабатывается.
Как это работает:
- Контроллер загружает и получает первый список данных из модели. Затем контроллер отображает оболочку для тегов и отображает первый раскрывающийся список. Здесь я предполагаю, что вы понимаете, как создать выпадающий список выбора и ввод тегов, или что вы можете подключиться к таким библиотекам, как jQuery UI, чтобы получить эти компоненты.
- При выборе элемента из списка запускается «выбранное» событие. Это заставляет контроллер скрывать список выбора, отображать тег для выбранного элемента, загружать и отображать последующий список для выбора. Этот процесс продолжается до тех пор, пока не будут выбраны все измерения данных, при которых компонент запускает событие «complete», чтобы любой слушатель знал, что ввод был завершен.
- В то же время, после завершения, можно сделать ввод, чтобы добавить или обновить скрытый ввод в форму (для синхронного стандартного сообщения формы). В нашем случае это одностраничное приложение с асинхронным API RESTful, поэтому выбранное значение сохраняется в свойстве контроллера компонента и извлекается при сериализации формы.
- Когда щелкает тег «x», мы удаляем все выборки назад к предыдущему тегу. Скажем, например, было выбрано 4 тега, а мы «х» 3-го. 4-й также удалит. После удаления тегов будет представлен список выбора для самого низкого уровня.
- Для нашего компонента мы решили пропустить все списки, в которых есть только один элемент. Для этого мы просто выбираем тег и переходим к следующему списку. По этой причине, когда предварительно выбранный тег помечен как x-ed, мы также удаляем предыдущий тег.
Вот и все. Большая часть работы заключается в загрузке данных и их соединении.
Если у вас есть конкретный вопрос о какой-либо части этого компонента, пожалуйста, не стесняйтесь задавать другой вопрос, и я помогу, где смогу!