Tags input

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

Example 1: tags list with add button

In this example, you can search in employee list, or add a new employee by clicking button. If you select an employee that you already have selected before, it will be ignored. You can reorder tags by drag and drop. In the above list, we write the different outputs that can be used in your scripts, for intance to add entries to a table. But by default, we insert comma-separated result in a hidden input named tagzone-result.

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

$tagszone = TagsinputHelper::init(
  "tagzone", //id
  'Employees', // label
  route('tagsinputsearch'), //autocompleter script
  [ //Autocompleter parameters
    'csrfrefreshroute' => route('refreshcsrf') // route called if csrf token must be reloaded
  [ //tagsinput parameters
    'tagaddcallback' => 'showlist', // callback functions called after tag is addded
    'tagremovecallback' => 'showlist'
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).

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.