Код вложенности внутри элемента ввода

Question

Я ищу кого-то, чтобы вести меня в правильном направлении.

У меня есть форма ввода. Я хочу сделать это так, когда пользователь вводит что-то вроде «ландшафтного дизайна», он проверяет файл (json), и если «озеленение» найдено, оно создает небольшой квадрат внутри входной формы. Предоставление пользователям стека нескольких встроенных ячеек . Было бы что-то похожее на это:

Как я отправлял вопрос, я понял, что этот сайт использует точную функцию я ищу, так что лучший пример я ищу, чтобы сделать что-то вроде формы ввода тега в нижней части страницы вопроса.

Заранее благодарен!

Answer 1

Select2 делает это. Вы можете просмотреть его несколько ящиков для выбора пример here.

$(".js-example-basic-multiple").select2(); 

<select class="js-example-basic-multiple" multiple="multiple"> 
    <option value="landscaping">Landscaping</option> 
    ... 
    etc. all options you need 
</select> 

, так что вы можете добавить все ваши данные в json-файл в качестве параметров в поле выбора. Или, если вы видите больше примеров, он может загружать параметры из массива (Загрузка данных массива) или даже из удаленного файла, который возвращает JSON (Загрузка удаленных данных).