Pages UI
Search…
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.
1
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tag/bootstrap-tagsinput.css">
Copied!
Step two
Include the javascript file inside the <body>before core template script inclusions, if it's not there already.
1
<script src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js" type="text/javascript"></script>
Copied!
Step two
Add the markup.
1
<input id="#tagsinput" type="text" value="Amsterdam,Washington" data-role="tagsinput" />
Copied!
Step three
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
1
<script>
2
$(document).ready(function() {
3
$('#tagsinput').tagsinput({
4
typeahead: {
5
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
6
}
7
});
8
});
9
</script>
Copied!
Last modified 3yr ago
Copy link