Tags Input

jQuery tags input plugin is based on Twitter Bootstrap.

Please refer to jQuery tags input Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap-tagsinput.css inside the <head> if it's not there already.

<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tag/bootstrap-tagsinput.css">

Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already.

<script src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js" type="text/javascript"></script>

Step two

Add the markup.

<input id="#tagsinput" type="text" value="Amsterdam,Washington" data-role="tagsinput" />

Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

<script>
$(document).ready(function() {
    $('#tagsinput').tagsinput({
        typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
    });
});
</script>

PreviousQuill Editor NextFile Upload

Last updated 8 years ago