"Responsive Tags Input"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<title>Responsive Tags Input</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<form id="form">
<h2 class="text-center" style="margin-bottom:25px;">Responsive Tags Input With Autocomplete Examples</h2>
<label>Simple tags input:</label>
<input id="form-tags-1" name="tags-1" type="text" value="jQuery,Script,Net">
<label>Tags input with callbacks (check console):</label>
<input id="form-tags-2" name="tags-2" type="text" value="apple,banana,pizza">
<label>Tags input with various validation:</label>
<input id="form-tags-3" name="tags-3" type="text" value="">
<label>Tags input with autocomplete:</label>
<input id="form-tags-4" name="tags-4" type="text" value="">
</form>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{box-sizing: border-box;}
html{height: 100%;margin: 0;}
body{min-height: 100%;font-family: 'Roboto';margin: 0;background-color: #fafafa;}
.container { margin: 150px auto; max-width: 960px;}
label{display: block;padding: 20px 0 5px 0;}
.tagsinput,.tagsinput *{box-sizing:border-box}
.tagsinput{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background:#fff;font-family:sans-serif;font-size:14px;line-height:20px;color:#556270;padding:5px 5px 0;border:1px solid #e6e6e6;border-radius:2px}
.tagsinput.focus{border-color:#ccc}
.tagsinput .tag{position:relative;background:#556270;display:block;max-width:100%;word-wrap:break-word;color:#fff;padding:5px 30px 5px 5px;border-radius:2px;margin:0 5px 5px 0}
.tagsinput .tag .tag-remove{position:absolute;background:0 0;display:block;width:30px;height:30px;top:0;right:0;cursor:pointer;text-decoration:none;text-align:center;color:#ff6b6b;line-height:30px;padding:0;border:0}
.tagsinput .tag .tag-remove:after,.tagsinput .tag .tag-remove:before{background:#ff6b6b;position:absolute;display:block;width:10px;height:2px;top:14px;left:10px;content:''}
.tagsinput .tag .tag-remove:before{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.tagsinput .tag .tag-remove:after{-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}
.tagsinput div{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}
.tagsinput div input{background:0 0;display:block;width:100%;font-size:14px;line-height:20px;padding:5px;border:0;margin:0 5px 5px 0}
.tagsinput div input.error{color:#ff6b6b}
.tagsinput div input::-ms-clear{display:none}
.tagsinput div input::-webkit-input-placeholder{color:#ccc;opacity:1}
.tagsinput div input:-moz-placeholder{color:#ccc;opacity:1}
.tagsinput div input::-moz-placeholder{color:#ccc;opacity:1}
.tagsinput div input:-ms-input-placeholder{color:#ccc;opacity:1}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function() {
$('#form-tags-1').tagsInput();
$('#form-tags-2').tagsInput({
'onAddTag': function(input, value) {
console.log('tag added', input, value);
},
'onRemoveTag': function(input, value) {
console.log('tag removed', input, value);
},
'onChange': function(input, value) {
console.log('change triggered', input, value);
}
});
$('#form-tags-3').tagsInput({
'unique': true,
'minChars': 2,
'maxChars': 10,
'limit': 5,
'validationPattern': new RegExp('^[a-zA-Z]+$')
});
$('#form-tags-4').tagsInput({
'autocomplete': {
source: [
'apple',
'banana',
'orange',
'pizza'
]
}
});
$('#form-tags-5').tagsInput({
'delimiter': ';'
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Nice article, thanks for sharing! I have build one, check it out: https://jsuites.net/v3/javascript-tags

joaovmvini () - 4 years ago - Reply 0


Hi,

i find your tool very interesting. Thanks for this wonderful tool.

However I have some questions about your tool.

1) How is it possible to retrieve the values that the user entered ?

2) Is it possible to link a source of possible values with values coming from the database ?

Thanks for your answers.

Kind regards,

Thierry

thirt05 () - 5 years ago - Reply 0


Thanks a lot Thierry :)

Siddharth Panchal (17) - 5 years ago - Reply 0