Группированный input jquery

Визуально похоже на плагин Select2, а конкретно Multiple select boxes:

<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Есть возможность вводить свои значения если нет в списке нужных, называются теги:

<script type="text/javascript">
$(".js-example-basic-multiple").select2({
    tags: true
});
</script>
<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Это называется Multiple input. Могу предложить три варианта:

1. JQueryUI:

   $(function() { 
     var availableTags = [ 
       "ActionScript", 
       "AppleScript", 
       "Asp", 
       "BASIC", 
       "C", 
       "C++", 
       "Clojure", 
       "COBOL", 
       "ColdFusion", 
       "Erlang", 
       "Fortran", 
       "Groovy", 
       "Haskell", 
       "Java", 
       "JavaScript", 
       "Lisp", 
       "Perl", 
       "PHP", 
       "Python", 
       "Ruby", 
       "Scala", 
       "Scheme" 
     ]; 
    
     function split(val) { 
       return val.split(/,\s*/); 
     } 
    
     function extractLast(term) { 
       return split(term).pop(); 
     } 
    
     $("#tags") 
       // don't navigate away from the field on tab when selecting an item 
       .on("keydown", function(event) { 
         if (event.keyCode === $.ui.keyCode.TAB && 
           $(this).autocomplete("instance").menu.active) { 
           event.preventDefault(); 
         } 
       }) 
       .autocomplete({ 
         minLength: 0, 
         source: function(request, response) { 
           // delegate back to autocomplete, but extract the last term 
           response($.ui.autocomplete.filter( 
             availableTags, extractLast(request.term))); 
         }, 
         focus: function() { 
           // prevent value inserted on focus 
           return false; 
         }, 
         select: function(event, ui) { 
           var terms = split(this.value); 
           // remove the current input 
           terms.pop(); 
           // add the selected item 
           terms.push(ui.item.value); 
           // add placeholder to get the comma-and-space at the end 
           terms.push(""); 
           this.value = terms.join(", "); 
           return false; 
         } 
       }); 
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    
   <div class="ui-widget"> 
     <label for="tags">Tag programming languages: </label> 
     <input id="tags" size="50"> 
   </div>

2. Мой скрипт:

   // Скрипт 
   $(function() { 
     $('[role="select"]').each(function() { 
       var e = this; 
       // Обромляем содержимое в блок и добавляем ещё одно поле для добавления тегов 
       $(e).html('<div role="field"></div><div role="list">' + $(e).html() + '</div>'); 
       var field = $(this).find('[role="field"]'), // Получаем блок с где будут сохраняться теги 
         list = $(this).find('[role="list"]'); // Получаем блок с option 
       $(e).val(''); // Создаём для элемента [role="select"] значение value 
       // Проверяем, есть ли выбранные option 
       if (list.find('option[selected]').length > 0) { 
         // Если да, то создаём для каждого option функцию 
         list.find('option[selected]').each(function() { 
           var val = $(this).attr('value') || $(this).text(); // Получаем значение option из атрибута value или, если его нет, из содержимого 
           // Проверяем, пустое ли поле с тегами 
           if ($(e).val() == '') { 
             $(e).val(val); // Если пустое, то просто добавляем значение val 
           } else { 
             $(e).val($(e).val() + ',' + val); // Если не пустое, то к содержимому добавляем запятую и значение option. Делаем что-то типа массива 
           }; 
           var tag = $('<span role="tag">' + $(this).text() + ' <span role="remove">x</span></span>'); // Создаём тег 
           tag.prop('index', $(this).index()).val(val); // Записываем в него индекс соответствующего option и  
           field.append(tag); // Добавляем тег в конец поля 
           $(this).hide(); // Скрываем элемент option 
         }); 
       }; 
       // Создаём функцию нажатия на option 
       $(e).on('click', 'option', function() { 
         var val = $(this).attr('value') || $(this).text(), // Получаем значение value элемента option и если его нет, то его содержимое 
           valArr = $(e).val().split(','); // Создаём из значения value элемента [role="select"] массив, что бы проверить на наличие элемента 
         // Проверяем, добавлено ли уже это значение в value элемента [role="select"], что бы пользователь не мог добавить копию значения 
         if(valArr.indexOf(val) == -1){ 
           // Если значения в value элемента [role="select"] нет, то проверяем value на содержимое. Пустое ли оно 
           if ($(e).val() == '') { 
             // Если да, то просто добавляем val в value 
             $(e).val(val); 
           } else { 
             // Если value не пустое, то к содержимому добавляем запятую и значение val. Создаём что-то вроде строчного массива 
             $(e).val($(e).val() + ',' + val); 
           }; 
           var tag = $('<span role="tag">' + $(this).text() + ' <span role="remove">x</span></span>'); // Создаём тег 
           tag.prop('index', $(this).index()).val(val); // Записываем в тег индекс элемента option, на который нажали и его val 
           field.append(tag); // Добавляем тег в конец поля 
           $(this).hide(); // Прячем option 
           list.hide(); // Скрываем список с option, для эффекта :) 
         }; 
       // Создаём функцию нажатия на поле с тегами 
       }).on('click', '[role="field"]', function() { 
         list.toggle(); // Открываем или закрываем список с option при нажатии на поле с тегами 
       // Создаём функцию удаления тега из списка при нажатии на [role="remove"] 
       }).on('click', '[role="remove"]', function() { 
         var optInx = $(this).parent('[role="tag"]').prop('index'), // Получаем из тега индекс соответствующего option 
             val = $(this).parent('[role="tag"]').val(); // Получаем из тега value соответствующего option 
         $(this).parent('[role="tag"]').remove(); // Удаляем тег 
         list.find('option').eq(optInx).show(); // Ищем нужный option по индексу и показываем его 
         var valArr = $(e).val().split(','); // Создаём из значений value элемента [role="select"] массив для удаления значения 
         valArr.splice(valArr.indexOf(val),1); // С помощью функции indexOf ищем положение нужно value в массиве и удаляем его 
         $(e).val(valArr.join(',')); // Создаём из массива строку и переписываем значение value в [role="select"] 
       }); 
     }); 
     // Создаём функцию нажатия на любой элемент сайта 
     $(document).click(function(e) { 
       // Проверяем, нажатие было на элемент [role="field"] или нет 
       if($(e.target).closest('[role="field"]').length == 0){ 
         // Если нет, то скрываем список option 
         $('[role="list"]').hide(); 
       }; 
     }); 
   }); 
    
   // Проверка значение 
   $(function() { 
     $('button').click(function() { 
       console.log($('[role="select"]').val()); 
     }); 
   });

   [role="select"] { 
     display: inline-block; 
     position: relative; 
   } 
   [role="select"] > [role="field"] { 
     display: block; 
     -webkit-appearance: menulist; 
     box-sizing: border-box; 
     align-items: center; 
     white-space: pre; 
     width: 300px; 
     min-height: 27px; 
     padding: 1px; 
     -webkit-rtl-ordering: logical; 
     color: black; 
     background-color: white; 
     cursor: default; 
     border-width: 1px; 
     border-style: solid; 
     border-image: initial; 
     border-radius: 0px; 
     border-color: rgb(169, 169, 169); 
     font-size: 13px; 
     font-family: arial; 
   } 
   [role="select"] > [role="field"] > [role="tag"] { 
     display: inline-block; 
     background-color: #dddddd; 
     padding: 3px; 
     margin: 1px; 
     border-radius: 3px; 
   } 
   [role="select"] > [role="field"] > [role="tag"] > [role="remove"] { 
       display: inline-flex; 
       margin-left: 3px; 
       border-radius: 50%; 
       background-color: #cfcfcf; 
       width: 15px; 
       height: 15px; 
       cursor: pointer; 
       justify-content: center; 
       align-items: center; 
   } 
   [role="select"] > [role="list"] { 
     display: none; 
     position: absolute; 
     top: 100%; 
     left: 0; 
     right: 0; 
     margin: -1px 0 0 0; 
     border: 1px solid #a9a9a9; 
     background-color: white; 
     font-size: 13px; 
     font-family: arial; 
   } 
   [role="select"] > [role="list"] > option { 
     display: block; 
     color: black; 
     cursor: pointer; 
   } 
   [role="select"] > [role="list"] > option:hover { 
     background-color: #1b8bfa; 
     color: white; 
   }

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <div role="select" name="myselect"> 
     <option value="Значение 1" selected>Пункт 1</option> 
     <option value="Значение 2">Пункт 2</option> 
     <option value="Значение 3">Пункт 3</option> 
   </div> 
   <button>Показать значение select</button>

3. Другие библиотеки и отдельные скрипты: Bootstrap, Отдельный скрипт, MetroUICSS