Tags input
A Laravel library with jQuery add-on to add tags (Boostrap badges) selected by an auto-completer. Current version: 3.2.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'.
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>