How to create tag event?

Question

How to create tag event?

Navigation

#1 by (2 votes)

2

I'm creating a form and would like to add tags every time a name is selected with an autocomplete.

This would be equivalent to adding tags to an OS question. I would like to have a background on how to start researching this, as I could only simulate with html and Bootstrap.

html tag twitter-bootstrap

asked by anonymous 26.09.2015 / 22:03

1 answer

Loop in autocomplete JQuery How to call a fragment from an activity button

score 2 · 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 template by placing below the ones that are selected as you are in the image that you put as an example.

Example modifying the 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 I have helped you.