How to create tag event?

Question

I am creating a form and would like to add tags each time a name is selected with an autocomplete.

This would be the equivalent of adding tags to an OS question. I would like to have a basis on how to start researching about this, because I was only able to simulate with html and Bootstrap.

Answer 1

You can use the Select2 component to do this. Click here to open the link.

Example:

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

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Then you can customize the template by placing below the ones selected as you are in the image you put as example.

Example modifying component template:

function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
    '<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});

I hope it helped you.