Add Tags field in a bootstrap form

Whenever you need an input field, that will hold multiple tags-like words, by writing and pressing just Enter button, then you will definitely need this code snippet.

Here it is : 

<div class="form-group">

    <label for="tags" style="display: block;">Tags</label>

    

    <link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

        <style>

            .label-info {

                background-color: #CDCDCD;

                border: 1px solid #ccc;

                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

                display: inline-block;

                /* padding: 2px 6px; */

                color: #555;

                vertical-align: middle;

                border-radius: 4px;

                max-width: 100%;

                /* line-height: 22px; */

                cursor: text;

            }



            .bootstrap-tagsinput {

                width: 100%;

                padding: 10px;

            }



            .bootstrap-tagsinput .tag{

                color: #555;

                font-family: "Poppins", Arial, sans-serif;

                line-height: 1.4;

                box-sizing: border-box;

                text-decoration: none;

                transition: .3s all ease;

                text-transform: uppercase;

                padding: 3px 10px;

                margin-bottom: 2px;

                margin-right: 4px;



                font-size: 11px;

                font-weight: 400;

            }

        </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

        

    <input type="text" class="form-control" id="tags" name="tags" data-role="tagsinput" placeholder="Write and click Enter" style="color:#555555;word-wrap: normal;">

</div>

In case you wanted to add tags based on an ajax request filteration process here is a sample code that makes use of ajax request to a laravel controller method that returns a json object that is represented as li in the suggestions div. clicking on it will add this new li value/text to the result

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="{{asset('tags-input/bootstrap-tagsinput.min.js')}}"></script> --}}

    

<input type="text" class="form-control" id="tags" name="tags" value="{{ $snippet->tags }}" data-role="tagsinput" placeholder="Write and click Enter" style="color:#555555;word-wrap: normal;">

    

<script>

    $('document').ready(function(){



        var theLastWrittenValue = '';

        $("div.bootstrap-tagsinput > input").on('keyup', function(e){ 



            if(e.keyCode == 13) {

                $(".suggestions").empty().hide();

            }



            let writtenValue = $(this).val();

            theLastWrittenValue = $(this).val();



                $.ajax({

                    type: "get",

                    url: "{{url('/getTagSuggestions')}}/"+writtenValue,

                    /* data:formData, */

                    headers: {

                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                            },

                    dataType: "json",

                    success: function (msg) {//alert('Success');



                                if(msg.length) {

                                    $(".suggestions").html("");

                                    $.each(msg, function(index, element) {

                                        $(".suggestions").append("<li>"+element.tag+"</li>");

                                    });



                                    $(".suggestions").show();

                                } else {

                                    $(".suggestions").empty().hide();

                                }

                            },



                }).done(function (data) {//alert('donee');

                    

                }).fail(function () {

                    //alert('Failed to load.');

                });

        });





        $(".suggestions").on("click", "li", function(){

            let selectedValue = $(this).text();



            //Remove Old tag

            $('input#tags').tagsinput('remove', theLastWrittenValue);

            

            //Add the new Tag

            $('input#tags').tagsinput('add', selectedValue);



            //now Empty the suggestions div 

            $(".suggestions").empty().hide();

        })

    });

</script>



<div class="form-control suggestions" id="suggestions" style="height: auto !important;display: none;">

    {{-- <li>Click</li> 

    <li>here</li> 

    <li>Thanks</li> --}}

</div>  

Here is the laravel controller method used in the last example:

public function getTagSuggestions($tag='') {

    $suggestions = [];

    if($tag != '') {

        $suggestions = Tag::where('tag', 'like', "%$tag%")->get('tag')->toArray();

        return response()->json($suggestions);

    }

}

Mohammed Anwar

Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .