PHPackages seblhaire/tagsinput - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. seblhaire/tagsinput ActiveLibrary[Utility & Helpers](/categories/utility) seblhaire/tagsinput =================== A Laravel library with jQuery add-on to add tags (Boostrap badges) selected by an auto-completer. 3.4.0(3mo ago)049MITPHPPHP >=8.4 Since Aug 14Pushed 3mo ago1 watchersCompare [ Source](https://github.com/seblhaire/tagsinput)[ Packagist](https://packagist.org/packages/seblhaire/tagsinput)[ Docs](https://github.com/seblhaire/tagsinput)[ RSS](/packages/seblhaire-tagsinput/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (4)Versions (23)Used By (0) Tagsinput ========= [](#tagsinput) [By Sébastien L'haire](http://sebastien.lhaire.org) A Laravel library with jQuery add-on to add tags (Boostrap badges) selected by an auto-completer. It uses: - a Javascript auto-complete script based on [jQuery](https://jquery.com/) Javascript framework. - [Bootstrap](https://getbootstrap.com/) 5 CSS Framework. - package [seblhaire/autocompleter](https://github.com/seblhaire/autocompleter) [![Taginput](tagsinput.png)](tagsinput.png) Demo site available [here](https://sebastien.lhaire.org/tagsinput). Installation ------------ [](#installation) 1. `composer require seblhaire/tagsinput` 2. Composer will automatically link the package with Laravel. But you still can explicitely add provider and facade to your `config/app.php`: ``` 'providers' => [ ... Seblhaire\Autocompleter\AutocompleterServiceProvider::class, Seblhaire\Tagsinput\TagsinputServiceProvider::class, ... ], 'aliases' => [ ... "AutocompleterHelper" => Seblhaire\Autocompleter\AutocompleterHelper::class, 'TagsinputHelper' => Seblhaire\Tagsinput\TagsinputHelper::class ] ``` 3. Publish package (optionally). ``` $ php artisan vendor:publish ``` 4. For Javascript and stylesheets, see next section. Javascript ans stylesheets -------------------------- [](#javascript-ans-stylesheets) On a webpage, every JS library and CSS stylesheets can be linked separately. If you choose this classical way, first dowload and install above mentioned libraries. Then publish package files as explained above and put following tags in your template: ``` ``` But websites often use many libraries and stylesheets and browser must download many files before the site can be rendered properly. Modern websites come with a single compressed Javascript file which concatenates necessary scripts; same principle for stylesheets. With Laravel you can use [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) to compile files. Use [NPM](https://www.npmjs.com/) package manager : `npm install bootstrap jquery` Then your js source file should be something like this: ``` global.jQuery = require('jquery'); var $ = global.jQuery; var jQuery = global.JQuery; window.$ = $; window.jQuery = jQuery; require('bootstrap'); require('../../vendor/seblhaire/autocompleter/resources/js/autocompleter.js'); require('../../vendor/seblhaire/tagsinput/resources/js/tagsinput.js'); ``` For your stylesheet: ``` @import '~bootstrap/scss/bootstrap'; @import "../../vendor/seblhaire/autocompleter/resources/css/autocompleter"; @import "../../vendor/seblhaire/tagsinput/resources/css/tagsinput"; ``` Configuration file ------------------ [](#configuration-file) Tagsinput library is customizable. Default values can be changed, either in configuration file, or by passing options in Facade function (see next section). If you want to modify default configuration file, publish package files and access to `config/autocompleter.php` and `config/tagsinput.php`. Usage ----- [](#usage) Tagsinput package comes with a simple Facade. ### TagsinputHelper::init [](#tagsinputhelperinit) Inits a tagsinput object and an autocompleter object that can be passed to the view. `TagsinputHelper::init($divid, $label, $url, $optionsAc, $optionsTags)` where: - `$divid`: identifier of `` that contains tags input component; - `$label`: label of tags input component; - `$url` : route that must be used by autocompleter to load data. See [seblhaire/autocompleter](https://github.com/seblhaire/autocompleter) - `$optionsAc`: autocompleter component option; array of options. See [seblhaire/autocompleter](https://github.com/seblhaire/autocompleter). Option `'helptext'` is automatically overriden. Option `'callback'` is set by default by Tagsinput component, but you can write your own callback in case you need it. - `$optionsTags`: array of options. - ` 'maindivclass'` : class for main component ``. Default: `'form-group row'`. - `'divlabelclass'`: class for `` containing component label. Default: `'col-sm-2'`. - `'divacclass'`: class for `` containing autocompleter component. Default: `'col-sm-3'`. - `'divtaglist'`: class for `` containing tags. Default: `'col-sm-7'`. - `'inputcontainerclass'`: class for `` containing `` tag and button. Default: `'input-group'`. - `'addbuttoncontainerclass'`: class for `` containing `` tag. Default: `'input-group-append'`. - `'addbuttonclass'`: class for ``. Default: ` 'btn btn-primary'`. - `'buttonlabelclass'`: class for ``label. Default: `'fas fa-plus-circle'`. - `'taglistclass'`: class for `` tag containing tag list. Default: `'taglist'`. - `'tagclass'`: class for tag. Default: `'bg-primary'`. - ` 'tagremovebtnclass'`: class for `` tag containing tag remove button. Default: `'fas fa-trash-alt'`. - ` 'helptextclass'`: class for `` tag containing help text. Default: `'taginputhelper'`. `'helptext'` text to be displayed for help. Text can be string or translation key. Cf [below](#translation_keys). - `'showaddbutton'` : toggles display of add element button. Default: `true`. - `'addbuttoncallback'`: name of function which must be triggered when clicking to add new element. Eg: this callback should display a form to add information. Default: `null`. - `'tagaddcallback'`: name of function which must be triggered when a new tag is added. Default: `null`. Example function: `var showlist = function(tag, data, object){...}`where: - `tag` is object for `` element; - `data` is data attached to the tag (data return by Autocompleter); - `object` is the taginput JavaScript object. - `'tagremovecallback'`: name of function which must be triggered when a tag is removed. Default: `null`. Function parameters are like `tagaddcallback`. - `'taglabelelement'`: name of field in autocompleter result line containing text to display in tag. Default: `'taglabel'`. See [seblhaire/autocompleter](https://github.com/seblhaire/autocompleter). - `tagclasselement`: name of field in autocompleter results line that can be used to set a special tag class that is not the class by default. Default: `tagclass`. - `'field'`: name of field in result line containing data identifier or key. Default: `'id'.` See [seblhaire/autocompleter](https://github.com/seblhaire/autocompleter). - `'checkunicity'`: specify if value in tag list must be unique. If true, if same tag is selected twice, the second one is ignored and is not added to list. Default: `true`. - `hiddeninput`: automatically insert hidden input. This input will contain Tagsinput comma-separated results. Hidden input is named by Tagsinput object id followed by "-result". To summarize in your controller insert: ``` $tagszone = TagsinputHelper::init( "tagzone", 'Employee', route('tagsinputsearch'), [ 'resdivstyle' => [ //position autocompleter result list 'width' => '430px', 'top' => '-18px' ], ], [ /* tagslist options */ ] ); ... return view('tagsinput', [ ... 'tagszone' => $tagszone, ... ]); ``` In your blade template, insert following at the place you want the tags list to appear: `{!! $tagszone !!}` or `{!! $tagszone->output() !!}` ### Output methods [](#output-methods) #### output() [](#output) This method `output()` prints tags and outputs tagsinput and autocompleter initialization script. It uses the above methods that you can also use to organize your code as you wish. #### printLabel() [](#printlabel) This method prints the label ``. #### printAutocompleter() [](#printautocompleter) This method prints the autocompleter zone. #### printTagList() [](#printtaglist) This method prints the tag list zone. #### printHelpText() [](#printhelptext) This method prnts help text zone. #### printAcCallback() [](#printaccallback) Prints autocompleter callback to add a new tag to list. #### printTagInputInit() [](#printtaginputinit) Prints initialization of autocompleter and tagsinput objects. Better insert it in jQuery(document).ready clause. #### printHiddenInput() [](#printhiddeninput) Prints hidden input to contain tagsinput comma-separated output. Following methods can be used to manage tags list and to send tags list to other scripts with different formats. #### printReset() [](#printreset) Empties tags list. #### printCount() [](#printcount) Returns current tags list size. #### printGetArrayValues() [](#printgetarrayvalues) Returns an array of tags list values. Eg: \["CH","FR"\] #### printGetCommaSepValues() [](#printgetcommasepvalues) Returns a string with tags list values separated by comma. Eg.: CH,FR. This list is automatically inserted in hidden input if `hiddeninput` value is `true`. #### printSerialize($champ) [](#printserializechamp) Returns serialized values that can be used in a Javascript string to send values to a controller. In a blade template write for example: ``` let params = {!! $tagszone->printSerialize('country') !!}` ``` will output something like: `let params = jQuery('#tagzone_taglist').data('tagsinput').serialize('country');`and content of variable params will be: `country[]=CH&country[]=FR` #### printAddToList($varia) [](#printaddtolistvaria) This method can be used to pre-add values to the tag list at page initialization or after loading data by an Ajax script. `$varia` can be a simple Json object or an array of objects. `{code:'CH', taglabel:'CH: Switzerland'}` is an object that contains 2 fields: `code` labels the label value, the unique identifiers that will be return in tags list. This is the value of option `field`, Cf. above. `tagnsinput` is the label that will be displayed in tag, corresponding to option `taglabelelement`. Array of object is a comma-separated string of objects in square brackets `[]`. Cf example below. Insert in blade template: ``` jQuery(document).ready(function() { {!! $tagszone->printAddToList("[{code:'CH', taglabel:'CH: Switzerland'},{code:'FR', taglabel:'FR: France'}]")!!}; }); ... ``` This will output this string in code: `jQuery('#tagzone_taglist').data('tagsinput').addtolist([{code:'CH', taglabel:'CH: Switzerland'},{code:'FR', taglabel:'FR: France'}]);`Of course you can retrieve dynamic values from a database and pre-fill a form in order to edit database entries. Translation keys ---------------- [](#translation-keys) Laravel loads config files very early in process. Therefore config files cannot contain `__('translation.key')`. In order to solve this issue, we made an helper either to print directly strings or to send translation key to translation helper. Translation keys can be delimited by character # . Ex: `"#tagsinput::messages.tagshelp#"`. Original translations are stored under `vendor/seblhaire/tagsinput/resources/lang`. If you publish package files, you can find translations in `resources/lang/vendor/tagsinput/`. Feel free to translate keys in your own language and either to send it to the author or to do a merge request on GitHub. Questions? Contributions? ========================= [](#questions-contributions) Feel free to send feature requests or merge request to the author or simply to ask questions. ### Health Score 47 — FairBetter than 93% of packages Maintenance82 Actively maintained with recent releases Popularity8 Limited adoption so far Community7 Small or concentrated contributor base Maturity78 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~94 days Recently: every ~302 days Total 19 Last Release 93d ago Major Versions 1.0.2 → 2.02021-08-14 2.0.6 → 3.0.02022-06-29 PHP version history (3 changes)1.0.2PHP >=5.6 3.3.0PHP >=8.2 3.4.0PHP >=8.4 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/72663124?v=4)[Sébastien L'haire](/maintainers/seblhaire)[@seblhaire](https://github.com/seblhaire) --- Top Contributors [![seblhaire](https://avatars.githubusercontent.com/u/72663124?v=4)](https://github.com/seblhaire "seblhaire (25 commits)") ### Embed Badge ![Health badge](/badges/seblhaire-tagsinput/health.svg) ``` [![Health](https://phpackages.com/badges/seblhaire-tagsinput/health.svg)](https://phpackages.com/packages/seblhaire-tagsinput) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3355.3M346](/packages/psalm-plugin-laravel)[spatie/laravel-export Create a static site bundle from a Laravel app 674146.0k6](/packages/spatie-laravel-export)[zidbih/laravel-deadlock Make temporary Laravel workarounds expire and fail CI when ignored. 985.4k](/packages/zidbih-laravel-deadlock)[erlandmuchasaj/laravel-gzip Gzip your responses. 40146.5k2](/packages/erlandmuchasaj-laravel-gzip)[atlas-php/atlas A unified AI SDK for Laravel applications. 5345.4k](/packages/atlas-php-atlas)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 245.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)