users-search.js

window.onload = function () {
  let usersToAdd = [];
  
  function removeUser(id) {
    usersToAdd = usersToAdd.filter(user => user.id !== id);
    refreshUsersToAdd();
  }

  function refreshUsersToAdd() {
    const userLabels = usersToAdd.map(user => {
      const deleteIcon = $('<i class="delete icon"/>');

      deleteIcon.on('click', () => removeUser(user.id));

      return $('<div class="ui image label" />')
      .append($('<img>'))
      .append($('<span>').text(user.username))
      .append(deleteIcon);
    });

    const userInputs = usersToAdd.map(user =>
      $('<input type="hidden" name="ids[]" />').prop('value', user.id)
    );

    $('#users-add-form').empty().append(userLabels).append(userInputs);
  }

  function resetUsersToAdd() {
    usersToAdd = [];
    $('#users-add-form').empty();
  }
  
  $('#add-user-button').on('click', () => {
    $('#modal_add_user').modal('show');
    resetUsersToAdd();
  });

  $('.ui.search')
    .search({
      apiSettings: {
        url: '/api/users?q={query}'
      },
      fields: {
        results: 'data',
        title: 'username'
      },
      onSelect(result) {
        if (!usersToAdd.find(user => user.id === result.id)) {
          usersToAdd.push(result);
          refreshUsersToAdd();
        }
      }
    })
  ;
}