Tags input

A Laravel library with jQuery add-on to add tags (Boostrap badges) selected by an auto-completer. Current version: 3.4.0. Project on GitHub. Project on Packagist. This demosite sources available here.

Example 2: tags list with pre-existing tags

In this example, we pre-add elements in tag list. This will be useful to update existing entries in tables. We also change default tag style by inserting a class name in a special field 'tagclass'.

Add at least one element

    Type search terms, select element with arrows and validate with Enter or use mouse- Reorder elements by drag-and-drop.

    Results



    Implementation

    In your controller create an instance of TagsinputHelper and pass the variable to the view.

    
$tagszone = TagsinputHelper::init(
  "tagzone2",
  'Countries',
  route('autocompletesearch'),
  [
    'id_included' => false, // id field is not added in autocompleter list result
  ],
  [
    'tagaddcallback' => 'showlist', // callback functions called after tag is addded
    'tagremovecallback' => 'showlist',
    'showaddbutton' => false, // add button not shown
    'tagclass' => 'bg-success', // change badge style
  ]
);
return view('template', ['tagszone' => $tagszone]);

    Then just insert the variable in the appropriate section in your view: {!! $tagszone !!}. Callback functions have the following signature: function(tag, data, object). Tags can be inserted as follows: {!! $tagszone->printAddToList("[{id:'CH', taglabel:'CH: Switzerland'},{id:'FR', taglabel:'FR: France'},{id:'GD', taglabel:'GD: Groland', tagclass:'bg-danger'}]")!!}. Here is the result printed in your page:

    
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#tagzone2').data('tagsinput').addtolist([{id:'CH', taglabel:'CH: Switzerland'},{id:'FR', taglabel:'FR: France'},{id:'GD', taglabel:'GD: Groland', tagclass:'bg-danger'}]);
  });
</script>